React JSX - Codepen 中的 console.log 语句有不同的结果，以及应该在 DOM 中显示什么答案

【问题标题】：React JSX - There are different results for console.log statements in Codepen and what should show in DOMReact JSX - Codepen 中的 console.log 语句有不同的结果，以及应该在 DOM 中显示什么
【发布时间】：2018-01-22 03:24:27
【问题描述】：

一般问题：

我在控制台中看到的预期结果与我在 DOM 中看到的结果之间存在差异。如果我在 ToDoList 组件实例中添加几个新的 ToDo 组件实例并尝试删除一个，控制台将显示正确的相应结果，但 DOM 不会显示正确的更新状态。

所以在我的 Codepen https://codepen.io/flo527/pen/eyjOmw?editors=0011 中，我设置了一个组件 TodoList，它将包含以下功能组件 ToDo 的许多实例：

const ToDo = props => (
<tr>
<td>
   <label>{props.id}</label>
   </td>
   <td>
     <input />
   </td>
   <td>
    <label>
     {props.createdAt.toTimeString()}
    </label>
   </td>
   <td>
    <span>
      <button onClick = {() =>
  props.removeFromList(props.id)}>
        Remove
      </button>
    </span>
</td>
</tr>
);

表示ToDoList组件正在封装Todo组件的代码：

{this.state.list.map(
    (todo, index) => (
       <ToDo key={todo.id}
                 {...todo}
       />
    )
)}

我已经通过 removeListItem 方法设置了控制台日志语句，以明确说明在 ToDoList 组件实例中单击了哪个 ToDo 实例以及在 removeListItem 方法中变量的状态。

【问题讨论】：

您认为哪些行为出乎意料？在哪一行代码中，console.log 没有反映您想要/看到的内容？
你可以尝试一些更简单的方法来从待办事项列表中删除项目，例如 list = list.filter(a => a.id !== idToRemove) 吗？
假设您在列表中添加了几个输入，然后删除了一些。在我给你的 codepen 示例的第 131 行：codepen.io/flo527/pen/eyjOmw?editors=0011。列表设置后的状态不会反映在 DOM 中，而是反映在控制台中。

标签： reactjs jsx babeljs

【解决方案1】：

removeFromList(index){
   var oldList = this.state.list;

  oldList.filter((item,i)=>{
      return (i != index); // or item.id != ID_PASSED_IN_FUNC
  });
 this.setState({oldList:oldList});
}

你可以使用 ES6 过滤器选项而不是全部循环，这将减少你的代码行以及问题。

【讨论】：

【解决方案2】：

因此，我阅读了有关 React 的更多信息，并发现了协调过程，其中 React 将根据虚拟 DOM 的先前和当前内存中表示之间的差异来更新 DOM。在我的代码中，我试图根据 Id 辨别差异，并且也在减少 id。这不是正确的解决方案，因为一旦我减少了 id，列表中的元素在具有减少的 id 的元素之前具有相同的 id，问题是键（React 用来检测元素唯一性的标识符）是设置为标识。解决方案是选择一个更独特的道具作为关键，所以我选择了 createdAt 道具，因为不能同时创建两个元素。这使得 removeItem 方法运行得更加顺畅。

 {this.state.list.map(
     (todo, index) => (
         <ToDo
            key={todo.createdAt}
            removeFromList = {this.state.removeFromList}
            {...todo}
         />
      )
 )}

更多关于 React Reconciliation：https://reactjs.org/docs/reconciliation.html

【讨论】：