Я новичок в response.js, и у меня возник вопрос по поводу моей программы. Я получаю сообщение об ошибке типа, когда пытаюсь вызвать метод при нажатии соответствующей кнопки. В основном метод генерирует случайное число, и я хочу отобразить это число в другом компоненте. Чтобы это сработало, мне нужно записать возврат в переменную defNum, расположенную в состоянии объекта. Я надеюсь, что вы можете помочь мне :)

Мой код в context.js :

  defaultNumber = () => {
    let defNumChange = [...this.state.defNum];
    defNumChange = Math.random().toString(8).substr(2);
    defNumChange = parseInt(defNumChange);
    console.log(defNumChange);
    this.setState(() => {
  return {
    defNum: defNumChange,
  };
});

И это мой объект состояния, который также находится в context.js:

  state = {
    products: [],
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct,
    subTotal: 0,
    delivery: 0,
    totalSum: 0,
    defNum: 0,
  };

Это компонент , в котором я хочу отобразить мое возвращаемое значение метода:

import React, { Component } from "react";
import { ProductConsumer } from "../context";

export default class thankYou extends Component {
render() {
return (
  <ProductConsumer>
    {(value) => {
      const { defNum } = value;
      return (

        <React-Fragement>
          <div className="container">
            <div className="row mt-2 mb-2">
              <div className="col-md-12">
                <div className="jubotron text-center text-titel">

                  <p></p>
                  <h4>Vielen Dank für deine Bestellung!</h4>
                  <hr />
                  <p className="mt-6">
                    Wenn dir unsere Produkte gefallen komme gerne wieder auf
                    uns zurück
                  </p>

                  <p className="mt-6">
                    <strong>
                      Dein .Dog.Styles. Team freut sich auf dich
                    </strong>
                  </p>
                  <p className="mt-6">
                    Bitte überprüfe deine E-Mails, um weitere Details zu
                    erhalten.
                  </p>
                  <hr />
                  <p></p>

                  <p className="mt-6">
                    <strong>Deine Bestellnummer: {defNum} </strong>      <------ THIS ONE :)
                  </p>
                </div>
              </div>
            </div>
          </div>
        </React-Fragement>
      );
    }}
  </ProductConsumer>
);}}
1
TimoW 16 Июл 2020 в 17:04

1 ответ

Лучший ответ

Ваш defnum является целым числом в соответствии с вашим state (0) и его нельзя итерировать. Он должен быть либо array, либо Set, либо object, либо строкой, повторяемый.

let defNumChange = [...this.state.defNum]; // so this won't work 

Синтаксис распространения (...) позволяет развернуть итерацию, такую ​​как выражение массива или строка, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), или выражение объекта, которое будет развернуто места, где ожидается ноль или более пар ключ-значение (для объектных литералов)

См. Документ здесь

Что вы можете сделать, так это добавить double quotes к значению (просто взломать) defnum, чтобы сделать его повторяемым

 state = {
    products: [],
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct,
    subTotal: 0,
    delivery: 0,
    totalSum: 0,
    defNum: "0", // as string is iterable this will work
  };
1
Shubh 16 Июл 2020 в 14:18