奇怪的 bug。setState 更新 state 之后并没有重新 render 出来正确的值。

[lbfeng]

Link: https://gitlab.com/alex1007/react-test.git

input 里输入名字或者邮箱返回 match 的结果。前几个返回的值即使在 setState 之后也不会消失。

https://gitlab.com/alex1007/react-test/raw/master/shot.png

[maichael]

你的 Contact 子组件写的有问题，直接取 props 就好，为什么存到 state 里。

子组件的 state 从来没变过。

[lbfeng]

@maichael 因为要高亮 keyword 所以还是需要在 constructor 里初始化。getDerivedStateFromProps 解决了 bug

https://stackoverflow.com/questions/41233458/react-child-component-not-updating-after-parent-state-change?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

const contacts = this.state.result.map((contact, i) =>
<Contact contact={contact} key={i} keyword={this.state.query} />);
console.log(contacts);

我的问题是 contacts 这个 array 已经变了，问什么还是有之前的会显示。

[lbfeng]

@maichael 我知道了，一开始有 array 里有 1000 个值，有 1000 个 Contact 被 mount，keyword 变化时 array 的长度变了。多余的被 unmount，剩下的不变，虽然的有新的 props 但因为没有 getDerivedStateFromProps，所以也没被更新。不知道想的对不对。