Question

我在React中创建一个项目，但出现错误。

我不明白为什么要定义所有属性。

有人知道会发生什么吗？

代码如下。它只是Numbers的一个组成部分，其属性是：由于CSS中有两个不同的类，因此选择的数字，选择的数字，使用的数字和div的类名称。

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>
            );
        }
      };

Answer 1

更改渲染方法： render = () => {

成为 render() {

Answer 2

也许暗示了Patrick提到的内容，所以您不应该在render方法中设置状态。 setState的回调会导致您的组件重新呈现，因此它是一个循环引用。如果您需要在组件首次安装时运行一次setState，那么您应该在另一个组件事件内部运行，例如：

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

还要注意，this.setState()是一个函数，而不是this.state之类的属性。

Answer 3

已解决但具有功能

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

有人知道为什么会这样吗？

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>
      );
  }

Answer 4

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

如上所述，在render方法中设置数据确实是个坏主意。我将使用componentDidMount或componentDidReceiveProps方法。

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

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

如果您在如上所述的方法中执行此操作，请不要忘记将this绑定到该方法，否则该方法将不包含this的定义，因此setState方法会获胜没空。

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

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

Gl。

定义所有属性后，无法读取未定义React的属性“ bind”

4 个答案: