Javascript 正在更新数组的状态？

好的，这是我的代码：

var uuid = require("uuid-v4");
// Generate a new UUID
var myUUID = uuid();
// Validate a UUID as proper V4 format
uuid.isUUID(myUUID); // true

var questionNum = 0;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: uuid(),
      title: "",
      author: "",
      questions: [],
      answers: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.addQuestion = this.addQuestion.bind(this);
    this.removeItem = this.removeItem.bind(this)
  }

  componentDidMount() {
    // componentDidMount() is a React lifecycle method
    this.addQuestion();
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  removeItem (index) {
    questionNum--;
    this.setState(({ questions }) => {
      const mQuestions = [ ...questions ]
      mQuestions.splice(index, 1)
      return { questions: mQuestions }
    })
    this.setState(({ answers }) => {
      const mAnswers = [ ...answers]
      mAnswers.splice(index, 4)
      return { answers: mAnswers}
    })
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  addQuestion() {
    questionNum++;
    this.setState(previousState => {
      const questions = [
                          ...previousState.questions,
                          <input 
                            type="text"
                            value={this.state.questions}
                            onChange={this.handleChange}
                            name="question"
                            key={uuid()}
                          />
                        ];
      const answers = [
                        ...previousState.answers,
                      ];

      for (var i = 0; i < 4; i++) {
        answers.push(
          <input 
            type="text"
            onChange={this.handleChange}
            name={uuid()}
          />
        );
      }
      return { questions, answers };
    });
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  render() {
    return (
      <div className="App">
        <div>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Quiz Form 3.0</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>

        <div  className="formDiv">
          <form>
            <div className="Intro">
              Give your Quiz a title:{" "}
              <input
                type="text"
                value={this.state.title}
                onChange={this.handleChange}
                name="title"
              />
              <br />
              Who's the Author?{" "}
              <input
                type="text"
                value={this.state.author}
                onChange={this.handleChange}
                name="author"
              />
              <br />
              <br />
            </div>
            <div className="questions">
            <div className="questions">
              Now let's add some questions... <br />
              <ol>
              {this.state.questions.map((question, index) => {
                return (
                  <li>
                  <div key={uuid()}>
                    Question
                    {question}<br />
                    <button onClick={ () => this.removeItem(index) }>
                  Remove Question
                </button>
                    Answer Choices<br />
                    {Array.from({ length: 4 }, () => (
                      <div>
                        <input type="checkbox" />
                        <input type="text" onChange={this.handleChange} />
                      </div>
                    ))}
                  </div>
                  </li>
                );
              })}
              </ol>

            </div>
              {
              // This is what it would look like for the structure
              // I proposed earlier.
              // this.state.questions.map((question) {
              //   return (
              //       <div>{question.quesion}</div>
              //       {
              //           question.answers.map((answer) => {
              //               return (<div>{answer}</div>);
              //           })
              //       }
              //   );
              // })
              // This would output all questions and answers.
              }
            </div>
          </form>
          <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
        </div>
      </div>
    );
  }
}

export default App;

---

我在更新我的

答案

和

问题

状态/道具时遇到问题。老实说，我不太明白他们怎么了。当按下

添加问题

按钮并添加4个对象（每个答案选项，4对1个问题）和一个问题时，将调用

添加问题

功能。调用

removeQuestion

功能时（按下

Remove Question

按钮时），该问题及其答案选项将从相应的数组中删除。我注意到我输入的答案选择输入或问题输入并不重要，问题输入都会更新相同的（新的和空白的）状态，答案选择输入做同样的事情。我做了一些编辑，所以我认为现在不可能输入它们（因为当我将它们设置为可输入类型时，“删除”和“添加问题”按钮无法正常工作）。如果有人解释了如何正确更新数组状态，那将非常有帮助。我真的是新来的，所以如果你有任何其他的建议，也会很酷。谢谢

我做了一些编辑，所以我不认为现在就可以输入它们

创建一个显示行为的列表，例如a，以增加有人查看你的代码的机会。你不能推到const。把你的常数答案改成让答案。@Thole好的，我会尽力的do@IdanHen是的，您可以推送到使用const定义的数组。您不能完全更改引用。