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

我正在学习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;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前名称：“”，
数组：['john'，'james'，'timothy']
}   
}
render（）{
const showNames=this.state.arrays.map（（thisName）=>{
常量值=
{thisName}
；
返回值；
}); 
常量getText=（e）=>{
设值=e.target.value；
这是我的国家({
currentName:value
})
}
常量addToUsers=（）=>{
this.state.arrays.push（this.state.currentName）
}
返回(
将新名称添加到列表中


添加用户

{showNames}

);
}
}
导出默认应用程序；

您需要确保使用

setState

方法更新状态

当您更新

数组时

将进入状态对象并直接操作数据，而不是使用该方法

相反，尝试以下方法：

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

---

您需要确保使用

setState

方法更新状态

当您更新

数组时

将进入状态对象并直接操作数据，而不是使用该方法

相反，尝试以下方法：

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

---

这有很多错误，但您的问题可能是您需要使用

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;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
姓名：[“约翰”、“詹姆斯”、“蒂莫西”]
}
}
addToUsers=（）=>{
这是我的国家(
prevState=>({
名称：[…prevState.names，this.input.value]
})
)
}
render（）{
const names=this.state.names.map(
（名称，索引）=>
{name}
)
返回(
将新名称添加到列表中


this.input=e}/>
添加用户

{names}

)
}
}
导出默认应用程序；

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

将

setState

用于

addToUsers

方法

取消

onChange

跟踪，并在单击按钮时直接从输入中提取名称

将

addToUsers

方法移出组件类，而不是在

render

将

this.state.arrays

重命名为

this.state.names

简化将

此.state.names

转换为列表项的过程

在数组元素（名称列表项）上设置键

在

setState

中使用

prevState

，以避免竞争条件

---

这有很多错误，但您的问题可能是您需要使用

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;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
姓名：[“约翰”、“詹姆斯”、“蒂莫西”]
}
}
addToUsers=（）=>{
这是我的国家(
prevState=>({
名称：[…prevState.names，this.input.value]
})
)
}
render（）{
const names=this.state.names.map(
（名称，索引）=>
{name}
)
返回(
将新名称添加到列表中


this.input=e}/>
添加用户

{names}

)
}
}
导出默认应用程序；

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

将

setState

用于

addToUsers

方法

取消

onChange

跟踪，并在单击按钮时直接从输入中提取名称

将

addToUsers

方法移出组件类，而不是在

render

将

this.state.arrays

重命名为

this.state.names

简化将

此.state.names

转换为列表项的过程

在数组元素（名称列表项）上设置键

在

setState

中使用

prevState

，以避免竞争条件

你可能必须补充一点

onChange={getText}.bind(this)

你的职能。 也要改变这一点

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

对此

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

你可能必须补充一点

onChange={getText}.bind(this)

你的职能。 也要改变这一点

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

对此

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

---

push返回的是数组的总长度，而不是更新后的数组，因此这将无法按预期工作<代码>名称：this.state.names.push（this.input.value）：）@MayankShukla很好，我太习惯Ruby了。已修复。push返回的是数组的总长度，而不是更新的数组，因此这将无法按预期工作<代码>名称：this.state.names.push（this.input.value）：）@MayankShukla很好，我太习惯Ruby了。修复了它。这是可行的，但我在调试时尝试过类似的方法。我注意到您使用concat（）而不是push（）。为什么会这样？@radiotic

push

修改现有数组，而

concat

构建新数组。我们也可以创建一个数组的副本，然后在

setState

中使用它之前将其推到该副本。这是可行的，但我在调试时尝试过类似的方法。我注意到您使用concat（）而不是push（）。为什么会这样？@radiotic

push

修改现有数组，而

concat

构建新数组。我们也可以创建数组的副本，然后在

setState