reactjs子元素不重新渲染而父元素

Question

我在我的 reactjs 项目中得到了以下代码。

这背后的想法是点击按钮，然后editTodoStatus函数会改变lists对象的完整状态。

  import { Button } from 'reactstrap';
  import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import * as TodoActions from "../actions/TodoActions";
  class List extends Component {
    constructor() {
      super();
      this.state = {
        lists:TodoStore.getTodos()
      };
    }
    editTodoStatus(event){
       const id = event.target.parentNode.dataset.id;
       TodoActions.editTodoStatus(id);
    }

    componentWillMount(){
      TodoStore.on("create", this.getStoreData.bind(this));
      TodoStore.on("edit", this.getStoreData.bind(this));
    }

    getStoreData(){
      this.setState({
        lists: TodoStore.getTodos()
      });
    }

    return(
     <div>    
     { 
        this.state.lists.map(
           function(todo){
              if (todo.complete){
                complete = <Button color="info"><i className="fa fa-check" /></Button>;
              }else{
                complete = <Button color="danger" onClick = {this.editTodoStatus.bind(this)} ><i className="fa fa-times" /></Button>;
              }
              return (
                  <li key = {todo.id} >
                    {complete}
                  </li>
              );
           }.bind(this)
        );
     }
     </div>
   );
}
export default List;

但是，该应用将仅重新呈现 Button 元素并忽略其中的 <i> 元素，这意味着 <i> 保持不变。

但如果我删除 <Button> 元素，<i> 将按预期重新渲染。

我不确定这背后的原因和问题的解决方案。

这是我的项目的链接。 https://johnhckuo.github.io/Todo-List/

如果你按下红色按钮使这个待办事项“完成”，你会看到问题（按钮的颜色改变了，但里面的图标没有改变）

我非常感谢任何建议。

Answer 1

很有可能 Button 的属性没有被更改，因此 React 认为没有理由更新 child。尝试使用更直接的语法，同时显式更改 Button 的属性：

renderItem = (id, complete) => {
  return <li key={id}>
    <Button onClick={complete && this.editTodoStatus} color={`${complete ? 'info' : 'danger' }`}>
      <i className={`fa ${complete ? 'fa-check' : 'fa-times'}`}
    </Button>
  </li>;
};

render() {
  const { lists } = this.state;

  return ( 
    <div>
     { lists.map(todo => this.renderItem(todo.id, todo.complete)) }
    </div>
  );
}

另一个有用的技巧是使用 React Fragment 代替无用的 div 父级：

 import React, { Fragment } from 'react';

 //...
 render() {
   return (
     <Fragment>
        //...same code as before, without useless div
     </Fragment>
   );

 } 

调试 editTodoStatus 方法以查看这是否有效地触发了更改。 希望有帮助