javascript - 在 ReactJs 中动态更新数组列表时出错

Question

我正在学习reactJS，所以我正在尝试一个例子。此示例有一个表单文本字段，可以通过单击按钮将项目添加到现有数组中。我在这里遇到错误，因为当我输入文本并单击按钮时，数组列表不会更新，除非我尝试更改文本字段中输入的文本。这就是我正在做的事情:

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      currentName : '',
      arrays : ['john', 'james', 'timothy']
    }   
  }
  render() {
    const showNames =   this.state.arrays.map((thisName) => {
        const values = <li>{thisName}</li>;
        return values;
     }); 
    const getText = (e) => {
        let value = e.target.value;
        this.setState({
          currentName : value
        })
    }
    const addToUsers =  () => {
      this.state.arrays.push(this.state.currentName)
    }

    return (
      <div>
        <p>Add new name to List</p><br/>
        <form>
          <input type="text"  onChange={getText}/>
          <button type="button" onClick={addToUsers}>Add User</button> 

        </form>
        <ul>
          {showNames}
        </ul>
      </div>

    );
  }
}

export default App;

Answer 1

这有很多问题，但您的问题可能是您需要使用 setState 来修改状态。

import React, { Component } from 'react';

class App extends Component {
  constructor(){
    super();

    this.state = {
      names: ['john', 'james', 'timothy']
    }
  }

  addToUsers = () => {
    this.setState(
      prevState => ({
        names: [...prevState.names, this.input.value]
      })
    )
  }

  render() {
    const names = this.state.names.map(
      (name, index) => <li key={index}>{name}</li>
    )

    return (
      <div>
        <p>Add new name to List</p><br/>

        <form>
          <input type="text" ref={e => this.input = e} />
          <button type="button" onClick={this.addToUsers}>Add User</button> 
        </form>

        <ul>
          {names}
        </ul>
      </div>
    )
  }
}

export default App;

此快速编辑更改了一些内容:

1. 使用 setState 作为 addToUsers 方法
2. 消除 onChange 跟踪并在单击按钮时直接从输入中提取名称
3. 将 addToUsers 方法移出到组件类，而不是在 render 上定义它
4. 将 this.state.arrays 重命名为 this.state.names
5. 简化 this.state.names 到列表项的转换
6. 在数组元素(名称列表项)上设置key
7. 在 setState 中使用 prevState 以避免竞争条件