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;

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

将setState用于addToUsers方法
取消onChange跟踪并在单击按钮时直接从输入中提取名称
将addToUsers方法移至组件类，而不是在render上定义
将this.state.arrays重命名为this.state.names
简化从this.state.names到列表项的转换
在数组元素（名称列表项）上设置key
在prevState中使用setState以避免比赛情况

Answer 2

您需要确保使用setState方法更新状态。

更新arrays时，您将进入状态对象并直接处理数据，而不是使用方法。

相反，请尝试以下操作：

const addToUsers =  () => {
  const newArray = this.state.arrays.concat([this.state.currentName]);
  this.setState({
    arrays: newArray
  });
}

Answer 3

您可能必须添加

onChange={getText}.bind(this)

您的功能。还要更改此

const addToUsers =  () => {
      this.state.arrays.push(this.state.currentName)
    }

对此

const addToUsers =  () => {
      this.setState({here put your variable})
    }

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

3 个答案: