TypeError:对象状态中的变量不可迭代

Question

我对react.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>
);}}

Answer 1

根据您的defnum (0)，您的state(0)是整数，它的非iterable.It应该是一个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
  };