类型错误：Object State 中的变量不可迭代

Question

我对 react.js 很陌生，我有一个关于我的程序的问题。 当我在单击相应按钮时尝试调用方法时出现类型错误。 基本上该方法会生成一个随机数，我想在另一个组件中显示这个数字。 为此，我必须将返回值写入位于 object state 中的变量“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,
  };
});

这是我的 state object 也位于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

根据您的state (0)，您的defnum是 integer 并且它不可迭代。它应该是array或Set或object或字符串以进行迭代。

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

扩展语法 (...) 允许在预期零个或多个 arguments（用于 function 调用）或元素（用于数组文字）的地方扩展可迭代对象，例如数组表达式或字符串，或者在表达式中扩展 ZA8CFDE6331BD59EB6666F8911需要零个或多个键值对（对于 object 文字）的地方

在此处查看文档

您可以做的是，在defnum的值（只是一个技巧）中添加double quotes以使其可迭代

 state = {
    products: [],
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct,
    subTotal: 0,
    delivery: 0,
    totalSum: 0,
    defNum: "0", // as string is iterable this will work
  };