Javascript 无法读取属性'；绑定&x27；当定义了所有属性时，未定义属性的

我在React做一个项目，但我犯了那个错误

我不明白为什么所有属性都被定义了

有人知道会发生什么吗

代码如下。它只是数字的一个组成部分，属性是：选择的数字、选择的数字、使用的数字和div的类名，因为我在CSS中有两个不同的类

import React, { Component } from 'react';

    export default class NumbersFrame extends Component {

      constructor(props){
        super(props);
        this.state = {
          numbers: [],
          selectNumber: this.props.selectNumber,
          usedNumbers: this.props.usedNumbers,
          selectedNumbers: this.props.selectedNumbers,
          className: null
        }
      }


        render = () => {
          for (var i=1; i <=9; i++){
            this.setState.className = "number selected-" + (this.state.selectedNumbers.indexOf(i)>=0);
            this.setState.className = this.state.className +  " used-" + (this.state.usedNumbers.indexOf(i)>=0);
            this.state.numbers.push(
                <div className={this.state.className} onClick={this.state.selectNumber.bind(null, i)}>
                  {i}
                </div>
              )
          }

          return(
            <div id="numbers-frame">
              <div className="well">
                {this.state.numbers}
              </div>
            </div>
            );
        }
      };

import React，{Component}来自'React'；
导出默认类号Frame extends组件{
建造师（道具）{
超级（道具）；
此.state={
编号：[]，
selectNumber:this.props.selectNumber，
UsedNumber:this.props.UsedNumber，
selectedNumbers:this.props.selectedNumbers，
类名：null
}
}
渲染=（）=>{
对于（var i=1；i=0）；
this.setState.className=this.state.className+“used-”+（this.state.usedNumbers.indexOf（i）>=0）；
这个。状态。数字。推(
{i}
)
}
返回(
{this.state.numbers}
);
}
};

更改渲染方法：

render=（）=>{

变成

---

render（）{

可能暗示Patrick提到的内容，您不应该在渲染方法内部设置状态。

setState

的回调会导致组件重新渲染，因此它是一个循环引用。如果您需要在组件首次装载时运行一次

setState

，那么您应该在不同的nt组件事件，例如：

componentDidMount = () => {
    this.setState([your new state]);
}

---

还要注意的是，

this.setState（）

是一个函数，而不是像

this.state

那样的属性，而是用一个函数解决的

我在主包装器组件中创建了一个函数，而不是一个组件，这是可行的

有人知道为什么会这样吗

function NumbersFrame (props) {

var selectNumber = props.selectNumber,
    usedNumbers = props.usedNumbers,
    selectedNumbers =  props.selectedNumbers,
    numbers = [], 
    className = null;

  for (var i=1; i <=9; i++){
    className = "number selected-" + (selectedNumbers.indexOf(i)>=0);
    className += " used-" + (usedNumbers.indexOf(i)>=0);
    numbers.push(
        <div className={className} onClick={selectNumber.bind(null, i)}>
          {i}
        </div>
      )
     }

  return(
      <div id="numbers-frame">
        <div className="well">
          {numbers}
        </div>
      </div>
      );
  }

功能编号框架（道具）{
var selectNumber=props.selectNumber，
UsedNumber=props.UsedNumber，
selectedNumbers=道具。selectedNumbers，
数字=[]，
className=null；
对于（var i=1；i=0）；
className+=“used-”+（usedNumbers.indexOf（i）>=0）；
数字。推(
{i}
)
}
返回(
{数字}
);
}

我建议使用“setSelectedNumber（number）”之类的方法

如上所述，在render方法中设置数据是一个非常糟糕的主意。我会使用componentDidMount或componentDidReceiveProps方法

最后但并非最不重要的是，要更新状态使用：

this.setState({‘selectNumbers’: value});

如果在上面提到的方法中执行此操作，请不要忘记将

this

绑定到该方法，否则该方法将不包含

this

的定义，因此setState方法将不可用

要将其绑定到方法，请在构造函数中执行以下操作：

   this.methodname = this.methodname.bind(this);

---

Gl.

在

构造函数中
this.props.selectNumber
的值是多少？您绝对不应该这样设置状态，尤其是在
render（）中
。请参阅。另外，是一种接受参数以对组件状态进行排队更改的方法。只是一个提示。您不需要在您的状态中添加道具属性。如果父级传递新道具，组件将重新加载，因此您在该状态中不需要它们。您也不应该尝试以这种方式更改状态。您该怎么办您建议我这样做吗？更改render（）后仍然会出现相同的错误{请阅读此内容：。但您可能根本不需要状态。您选择的数字已作为道具出现，因此您可以在render方法
{this.props.selectedNumbers.map（selectedNumber=>{…do something}中对其进行迭代）
那么问题在于执行。组件初始化时，绑定
selectNumber
selectNumber
是未定义的（即没有道具），或者以未定义的方式进行了变异。