时间戳

首页 > 解决方案 > 反应.js | 这两个功能有什么不同？

javascript - 反应.js | 这两个功能有什么不同？

问题描述

我有一个复选框<input type='checkbox' onClick={ this.props.isTicked.bind(this,id)} /> ，我还必须执行任务：

  state = {
    todos: [
      {
        id:1,
        title: 'Earn 10 lvl Faceit',
        completed: false
      },
      {
        id:2,
        title: 'Achieve 10 badges',
        completed: false
      }
    ]
  }

所以复选框的 id 等于其任务的 id。然后我想让'isTicked'函数使完成成为一个相反的值。我对每项任务也有风格（真假不同）

            <div style ={this.TaskStyle()}>

                <p>
                    <input type='checkbox' onClick={ this.props.isTicked.bind(this,id)} />
                    {title}
                </p>
            </div>

任务风格：

    TaskStyle = () => {
        if (this.props.task_value.completed) {
            return {

                backgroundColor: 'darkgreen',
                fontFamily: 'Arial',
                padding:'10px'
            }
        }
        else {
            return {
                backgroundColor: 'gray',
                fontFamily: 'Arial',
                padding:'10px'
            }
        }

        }

回到正题，这是 'isTicked' 的工作版本：

    this.setState({todos: this.state.todos.map(todo => {
      if (todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo
    })})

这是我的，我不知道为什么它不起作用....

  isTicked = (id) => {
    this.state.todos.forEach(todo => {
      if (todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo
    });
  }

有人能帮我吗？）

标签： javascriptreactjsfunction

解决方案

好吧，首先在你的isTicked函数中，你没有像以前的方法那样设置状态。

其次，map返回一个您设置为 newState 而forEach没有设置的新数组。事实上，这是两者之间的唯一区别。

现在，当您进行迭代forEach并直接更改状态时，React 无法知道状态已更改并且必须触发render函数。因此，您看不到另一种情况的变化。另一方面，在前一种情况下，当您修改状态时setState，React 会依次重新渲染组件并看到效果。

就这么简单 ：）

不要直接修改状态例如，这不会重新渲染组件：

// Wrong
this.state.comment = 'Hello';
// Instead, use setState():

// Correct
this.setState({comment: 'Hello'});

您可能想阅读以下内容：do-not-modify-state-directly

推荐阅读