添加新項React時狀態數組未正確更新？

Question

這是我的代碼：

var questionsList = []

class PhotoDropZone extends Component {
  render() {
    return (
      <div id="dropZone">
        Drop a photo here.
      </div>
    );
  }
}

class Answers extends Component {

  constructor(props) {
    super(props);
    this.state = {
      answers: Array(4).fill(""),
      correctAnswers: [],
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  // let event = {
  //   index: 1,
  //   value: 'hello'
  // };
  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var answers = this.state.answers;
    answers[event.index] = event.value;
    this.setState(() => ({
      answers: answers
    }));

    console.log(event);
  }

  render () {
    return (
      <div id="answers">
                Answer Choices<br />
        {this.state.answers.map((value, index) => (
          <Answer value={value} key={index} onUpdate={this.handleUpdate} number={index}/>
        ))}
      </div>
    );
  }
}

class Answer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: "",
      answer: props.value,
      correctAnswers: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState((previousState, props) => ({
      answer: value
    }));
    this.props.onUpdate({
      index: this.props.number,
      value
    });

    //
    // let sample = {
    //   kyle: "toast",
    //   cam: "pine"
    // };

    // sample.kyle
    // sample.cam

  }
  render () {
    return (
      <div>
        <input type="checkbox"/>
        <input type="text" value={this.state.answer} onChange={this.handleChange}/>
      </div>
    )
  }
}


var questionIdx = 0;

class Questions extends Component {
  constructor(props){
    super(props);
    this.state = {
      questions:[]
    }
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var questions = this.state.questions
    questions[event.index] = event.value;
    this.setState(() => ({
      questions: questions
    }));

    console.log(event);
  }

  addQuestion = question => {
    questionIdx++;
    this.setState(prevState => ({
      questions: [...prevState.questions, question]
    }));
  };

  removeQuestion () {
    console.log("remove button");
  }

  render () {
    return (
      <div id="questions">
        <ol id="quesitonsList">
           {this.state.questions.map((value, index)=> (
            <li id={"questionLi" + uuid()}>
              {<Question onUpdate={this.handleUpdate} value={value} number={index}/>}
              {<RemoveQuestionButton onClick={this.removeQuestion}/>}
            </li>
          ))}
        </ol>
        <AddQuestionButton onClick={this.addQuestion} />
      </div>
    );
  }
}

class Question extends Component {
  constructor(props){
    super(props);
    this.state = {
      question: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState((previousState, props) => ({
      question: value
    }));
      this.props.onUpdate({
        index: questionIdx,
        value
      });
  }

  render () {
    return (
      <div id={"questionDiv" + questionIdx}>
        Question<br />
        <input type="text" value={this.state.question} onChange={this.handleChange} />
        <PhotoDropZone />
        <Answers />
      </div>
    );
  }
}

class IntroFields extends Component {
  constructor (props) {
    super(props);
    this.state = {
      title: "",
      author: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    console.log([name]);
    this.setState((previousState, props) => ({
      [name]: value
    }));
  }

  render () {
    return (
      <div id="IntroFields">
        Title: <input type="text" value={this.state.title} onChange={this.handleChange} name="title"/>
        Author: <input type="text" value={this.state.author} onChange={this.handleChange} name="author"/>
      </div>
    );
  }
}

class AddQuestionButton extends Component {

  addQuestion = () => {
    this.props.onClick(
      <Question onUpdate={this.handleUpdate} value={this.value} number={this.index}/>
    );
  };

  render () {
    return (
      <div id="addQuestionButtonDiv">
        <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
      </div>
    );
  }
}

class RemoveQuestionButton extends Component {

  removeQuestion = () => {
    this.props.onClick(
      <Question onUpdate={this.handleUpdate} number={questionIdx}/>
    );
  }

  render () {
    return (
      <div id="removeQuestionButtonDiv">
        <button id="removeQuestionButton" onClick={this.removeQuestion}>Remove Question</button>
      </div>
    )
  }
}

class BuilderForm extends Component {
  render() {
    return (
      <div id="formDiv">
        <IntroFields />
        <Questions />
      </div>
    );
  }
}
export default BuilderForm;

因此，這是一個具有“ Add Question按鈕的表單，該按鈕將表單的整個部分添加到表單中。 我的questions和question狀態有question 。 當我添加初始問題並開始在我的“ Question輸入中鍵入內容時，會添加另一部分（就像再次按下“ Add Question按鈕一樣），並且我注意到我的questions數組中添加了兩項，一個是對象數組，另一個是我鍵入的內容。每次單擊“ Add Question按鈕時，都會將另一個對象數組的內容添加到questions數組中，而無論我鍵入的是哪個“問題”輸入，字符串對象（在questions數組內部）都將更新。 理想情況下，表單的每個部分都將更新其自己的狀態。

我不確定為什么會這樣，因為我是React和JS的新手，所以即使對您認為正在發生的事情進行一點解釋也會很有見地。

如果您需要更多解釋，請告訴我，我會盡力解釋。 我已經嘗試在CodePen和其他工具上使用它，但我從未成功過。 提前謝謝。

更新：我能夠在CodeSandbox上獲得它

Answer 1

questionIdx比預期大1 ，因此在使用時會創建一個新問題。

可以在Question組件的handleUpdate方法中使用this.props.number 。

handleChange(event) {
  const target = event.target;
  const value = target.type === "checkbox" ? target.checked : target.value;
  this.setState({
    question: value
  });
  this.props.onUpdate({
    index: this.props.number,
    value
  });
}