为什么 ES6 中的 map 函数没有刷新？答案

【问题标题】：Why map function in ES6 is not refreshed?为什么 ES6 中的 map 函数没有刷新？
【发布时间】：2018-08-06 06:10:17
【问题描述】：

我想创建一个待办事项列表，它将任务存储在allTasks 状态，当我手动推送一些数据时工作，但当我添加一个带有输入的项目时，它没有在地图功能中显示。

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            allTasks: []
        }

    this.addToList = this.addToList.bind(this);
    }

    addToList() {
        this.state.allTasks.push(this.state.inputValue);
    }

    render() {
        return (
          <div>
              <h1>کار های خود را مدیریت کنید !</h1>
              <input type="text" placeholder="کار خود را بنویسید ..." onChange={ event => this.setState({ inputValue: event.target.value }) } />
              <button onClick={ this.addToList }>ثبت کردن</button>
              <hr />
              <ul>
              {
                  this.state.allTasks.map(task => {
                      return <li>{ task }</li>;
                  })
              }
              </ul>
          </div>
        );
    }
}

【问题讨论】：

你必须用this.setState(newState)更新状态，而不是直接在addToList中操作this.state。
此外，您还需要在您的lis 上使用key 道具。 reactjs.org/docs/lists-and-keys.html
@forrert 你能给我举个例子吗，它也可以帮助别人。
@TylerSebastian 一定要使用密钥吗？

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

你正在改变原来的state。不要改变状态，使用setState重新渲染ui。

addToList() {
   let k = [...this.state.allTasks];
   k.push(this.state.inputValue);
   this.setState({allTasks: k})
}

or
addToList() {
   this.setState({allTasks: [...this.state.allTasks, this.state.inputValue]})
}

直接改变状态不会重新渲染 ui。你应该避免直接改变状态。同样使用setState更新状态会重新渲染ui。

let k = [...this.state.allTasks]; 创建一个新数组，然后我们将一个值推送到k。所以在这种情况下，我们不会直接改变状态。相反，我们正在更改一个新创建的数组。之后，我们使用setState 设置state，这将更新ui。

【讨论】：

谢谢，你能告诉我到底发生了什么吗？我很困惑。
@AliBahaari 在 React 中，你永远不应该直接更新状态。查看reactjs.org/docs/state-and-lifecycle.html#using-state-correctly 了解更多信息
你不妨结合这两个操作，const k = [...this.state.allTasks, this.state.inputValue]

【解决方案2】：

你的答案如下：

class App extends Component {
   constructor(props) {
       super(props);
       this.state = {
          inputValue: '',
          allTasks: []
       };

       this.addToList = this.addToList.bind(this);
   }

   addToList(e) {
      if( e && e.preventDefault ) e.preventDefault();
      this.setState({
         allTasks: [...this.state.allTasks, this.state.inputValue]
      });
   }

   render() {
       return (
         <div>
             <h1>کار های خود را مدیریت کنید !</h1>
             <input type="text" placeholder="کار خود را بنویسید ..." value={this.state.inputValue} onChange={ event => this.setState({ inputValue: event.target.value }) } />
             <button onClick={ e => this.addToList(e) }>ثبت کردن</button>
             <hr />
             <ul>
                {
                   this.state.allTasks.map(task => {
                     return <li>{ task }</li>;
                   })
                }
             </ul>
         </div>
       );
   } 
}

这里 this.setState 更新状态并且 [...allTasks, this.state.inputValue] 将 inputValue 附加到 allTasks 的数组中。状态的变化使组件重新渲染它，因此更新的值将在您的列表中可见。

【讨论】：