Javascript TypeError:对象状态中的变量不可编辑

我是react.js的新手，我有一个关于我的程序的问题。当我试图在单击相应的Button时调用一个方法时，我得到了一个类型错误。基本上，这个方法会生成一个随机数，我想在另一个组件中显示这个数。为了实现这一点，我必须在对象状态中的变量'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>
);}}

import React，{Component}来自“React”；
从“./context”导入{ProductConsumer}；
导出默认类thankYou扩展组件{
render（）{
返回(
{（值）=>{
常量{defNum}=value；
返回(

别伦·丹克·弗尔·戴恩·贝斯特隆！


我们的新产品已经被淘汰了
uns zurück



Dein.Dog.Styles.法国队



Biteüberprüfe deine电子邮件，嗯weitere详细信息
埃尔哈顿。




Deine Bestellnummer:{defNum}您的
defNum
是符合
状态的整数（0），且不可编辑。它应该是
数组
或
集合
或
对象
或字符串

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

扩展语法（…）允许使用iterable，例如数组表达式或
要在零个或多个参数（用于
函数调用）或元素（用于数组文本），或
要在零个或多个位置展开的对象表达式
需要键值对（用于对象文字）

见医生

您可以做的是，在
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
  };

现在它开始工作了，非常感谢！今天肯定学到了一些新东西：）