时间戳

首页 > 解决方案 > 组件在 setState() 后不重新渲染

javascript - 组件在 setState() 后不重新渲染

问题描述

我的代码中有以下组件：

class ContactsList extends Component {
   constructor(props) {
      super(props);
      this.state = {
         contactItems: [
            <ContactItem key="Lena" login="typeofweb1" name="Lena" department="JavaScript Developer" border="0" />,
            <ContactItem key="Brian" login="typeofweb2" name="Brian" department="Human Resources" />,
            <ContactItem key="Rick" login="typeofweb3" name="Rick" department="QA" />
         ]
      };
   }

   render() {
      return (
         <ul className="list-group list-group-flush container">
            {this.state.contactItems}
            <button type="button" onClick={this.addContactItem}>
               Add
            </button>
         </ul>
      );
   }

   addContactItem = () => {
      console.log(this.state.contactItems);
      this.state.contactItems.push(<ContactItem key="Rick" login="typeofweb3" name="Rick" department="QA" />);
      this.setState({ contactItems: this.state.contactItems });
   };
}

问题是组件没有被更新，即使状态正在改变（我可以在 console.log 中看到 contactItems 数组正在获取新元素）。.push() 有问题，因为如果只是将 setState 更改为类似 

this.setState({ contactItems: ["something"]});

然后它可以正常工作。

标签： javascriptreactjs

解决方案

我不完全知道为什么，但这有效：

class ContactsList extends Component {
   constructor(props) {
      super(props);
      this.state = {
         contactItems: [
            <ContactItem key="Lena" login="typeofweb1" name="Lena" department="JavaScript Developer" border="0" />,
            <ContactItem key="Brian" login="typeofweb2" name="Brian" department="Human Resources" />,
            <ContactItem key="Rick" login="typeofweb3" name="Rick" department="QA" />
         ]
      };
   }

   render() {
      return (
         <ul className="list-group list-group-flush container">
            {this.state.contactItems}
            <button type="button" onClick={this.addContactItem}>
               Add
            </button>
         </ul>
      );
   }

   addContactItem = () => {
      this.setState(prevState => ({
         contactItems: prevState.contactItems.concat([<ContactItem key="Rick" login="typeofweb3" name="Rick" department="QA" />])
      }));
   };
}

有人可以向我解释为什么下面的代码有效而前面的无效吗？

推荐阅读