Question

我正在尝试绘制一个位于我状态下的名为Answers的数组。但是，每当尝试这样做时，我总是收到一条错误消息：“无法读取未定义'answers'的属性”。

constructor(props){
        super(props)

        this.state = {
            answers:[]
        }

        console.log(this.state.answers)
        this.answerList = this.answerList.bind(this)
    }

answerList = this.state.answers.map((answer)=>{
            return  <div>{answer}</div>
    })

 render(){
        return(
            <div className="list ui container">
                <div className="ui grid">
                    <div className="row centered"> 
                        { this.answerList}
                    </div>
                </div>
            </div>
        )
    }

我尝试将其绑定，将其更改为箭头函数，甚至将其放入Answers数组中，但仍然遇到相同的错误。我唯一能想到的就是出现此错误，因为我错误地绑定了某些东西，或者根本没有绑定它。

edit：当我将其更改为箭头函数时，出现一个错误，指出我不能作为react子函数而不是说答案没有定义，因此我认为这是一个有约束力的问题。

Answer 1

您应该采取另一种方法，并在执行render之前，在return方法内创建答案列表，如以下示例所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      answers: []
    };
  }

  render() {
    const answerList = this.state.answers.map(answer => {
      return <div>{answer}</div>;
    });

    return (
      <div className="list ui container">
        <div className="ui grid">
          <div className="row centered">{answerList}</div>
        </div>
      </div>
    );
  }
}

收到一条错误消息，指出我的状态未定义

1 个答案: