reactjs - React Array.find() 在将输入的 defaultValue 设置为对象数组中的字符串时不起作用

Question

嗨，我正在尝试以动态形式填充我的问题 ( <label>s) 和答案( <textarea>) 的值。问题的值作为对象从服务器接收：

questions: {
"q1": "Question 1",
"q2": "Question 2",
"q3": "Question 3",
... up to q11.
}

并且答案的值被接收为：

Answers:
[{"q":"q1","ans":"answer to q1"},{"q":"q4","ans":"answer to q4"}]

问题和答案都存储在具有相同名称的状态中，初始状态为：

questions: {}
answers: []

问题已正确呈现，但对于我得到的答案Cannot read property 'ans' of undefined

表格如下所示：

为什么不在this.state.answers.find(answer => answer.q === questionNumber).ans这里工作？还是我做错了什么？

这就是我设置状态的方式：

componentDidMount() {
fetch(`http://localhost:3002/api/questions`, {
            method: "GET",
            headers: {"Content-Type": "application/json"}
        }).then(res => {
            if(!res.ok) {
                throw `Error getting questions\n${res.statusText}`;
            }

            return res.json()
        }).then(data => {
            this.setState({questions: data.questions, answers: data.answers});
        }).catch(err => {
            throw `Error getting questions\n${err}`;
        });
}

这就是我尝试从状态获取数据并填充字段的方式

 render(){
        return (
            !this.state.questions ? <h2>No Questions Found</h2> :
            <div>
               <form className="questionaire">
                   {Object.keys(this.state.questions).map( (questionNumber, index) => {
                       return (
                       <label className="questions" key={`${questionNumber}`}>
                        <span>{this.state.questions[questionNumber]}:</span>
                        <textarea name={questionNumber} defaultValue="" onChange={this.handleFormChange}></textarea>
                        </label>)
                   })}
                   <button id="info-submit" onClick={this.submit}>Submit Information</button>
               </form>
            </div>

            )
        }

标签： reactjs

Answer 1

你的状态如何设置？

在尝试重现您的问题时，我可以通过像这样设置组件来使其工作：

class App extends React.Component {
  state = {
    questions: {},
    answers: []
  };


  componentDidMount() {
    setTimeout(() => {
      this.setState({
        questions: {
          q1: "Question 1",
          q2: "Question 2",
          q3: "Question 3"
        },
        answers: [
          { q: "q1", ans: "Question 1's answer" },
          { q: "q2", ans: "Question 2's answer" },
          { q: "q3", ans: "Question 3's answer" }
        ]
      });
    }, 2000);
  }

  render() {
    return (
      <form className="questionaire">
        {Object.keys(this.state.questions).map((questionNumber, index) => {
          return (
            <label className="questions" key={`${questionNumber}`}>
              <span>{this.state.questions[questionNumber]}:</span>
              <textarea
                name={questionNumber}
                defaultValue={
                  this.state.answers.find(answer => answer.q === questionNumber)
                    .ans
                }
                onChange={this.handleFormChange}
              />
            </label>
          );
        })}
        <button id="info-submit" onClick={this.submit}>
          Submit Information
        </button>
      </form>
    );
  }
}

如果您的答案需要等待异步响应，那么您的问题可能在该区域附近，但我需要再次查看您如何设置您的状态。

可执行代码：