如何在React State的已有数组中追加新值？组件实现求助

嘿，你的问题出在对数组操作和React State不可变性的理解上！Array.push() 会直接修改原数组，而且它返回的是数组的新长度，不是更新后的数组——这就导致你把一个数字存进了mistake状态里，完全不是你想要的结果。而且React要求我们不能直接修改state中的数据，必须通过生成新的数组来更新state，这样React才能检测到变化并重新渲染组件。

下面给你几种正确的实现方式，都是遵循React不可变性原则的：

方法1：使用ES6展开运算符（最推荐） #

展开运算符可以轻松复制原数组，并追加新元素，写法简洁直观：

addMistake(event) {
  // 阻止表单默认提交行为（如果是通过表单按钮触发的话）
  event.preventDefault();
  // 确保输入值不为空再添加
  if (this.state.value.trim()) {
    this.setState(prevState => ({
      // 复制原数组并追加新值
      mistake: [...prevState.mistake, prevState.value],
      // 清空输入框
      value: ''
    }));
  }
}

这里用了setState的函数式更新，因为我们需要依赖之前的state值——当更新依赖于当前state时，函数式更新是更安全的做法，能避免异步更新带来的问题。

方法2：使用Array.concat() #

concat()方法会返回一个新数组，不会修改原数组，也能实现追加：

addMistake(event) {
  event.preventDefault();
  if (this.state.value.trim()) {
    this.setState(prevState => ({
      mistake: prevState.mistake.concat(prevState.value),
      value: ''
    }));
  }
}

方法3：先复制原数组再push（不推荐，但理解原理有用） #

先通过slice()复制原数组（slice()返回新数组），再给新数组push元素，最后更新state：

addMistake(event) {
  event.preventDefault();
  if (this.state.value.trim()) {
    const newMistakes = this.state.mistake.slice();
    newMistakes.push(this.state.value);
    this.setState({
      mistake: newMistakes,
      value: ''
    });
  }
}

完整的组件代码（包含展示列表） #

最后给你补全整个组件，加上输入框、按钮和错误列表的展示：

import React, { Component } from 'react';

class AddMistake extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mistake: [],
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.addMistake = this.addMistake.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  addMistake(event) {
    event.preventDefault();
    if (this.state.value.trim()) {
      this.setState(prevState => ({
        mistake: [...prevState.mistake, prevState.value],
        value: ''
      }));
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.addMistake}>
          <input
            type="text"
            placeholder="输入错误名称"
            value={this.state.value}
            onChange={this.handleChange}
          />
          <button type="submit">添加错误</button>
        </form>
        <h3>已添加的错误列表：</h3>
        <ul>
          {this.state.mistake.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default AddMistake;

这样修改后，你就能正确把输入的“Mistake Name”追加到state数组里，并且实时展示出来啦！

内容的提问来源于stack exchange，提问作者Ishan Patel