Javascript 反应-当父组件状态更改时，如何强制子组件重新渲染？

在我的笔下

发生的事情很简单。调用

this.send（）

方法时

this.state.chat

被发送到子组件

，然后子组件被连接到

this.state.messages`数组并呈现

但问题是，在渲染1秒钟后，我更新了

this.state.sent

，这是

的一个属性，但消息组件不会重新渲染

请问我如何强制它重新渲染

class Messages extends React.Component{
constructor(props){
super(props);
}
render(){
return(
`<p id={this.props.key} className={this.props.style}>{this.props.msg}<span>{this.props.sent}</span></p>`);
}
}


class Chat extends React.Component {
constructor(props) {
super(props);
this.count = 0;
    this.state = {chat :'',messages:[],sent:[]}; 
}
chatChange(event){
    this.setState({chat : event.target.value});
}
send(e){
    e.preventDefault();
    let x = this.state.messages;
    this.setState({messages:x.concat([<Messages style="me" msg={this.state.chat} key={this.state.chat} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />])});
this.setState({chat:''});
setTimeout(()=>{
  this.setState({sent:this.state.sent.concat(['sent'])});
  this.count++;
},1000);
}
render () {
    return(
        `<div>
        <div id="top"><h1>Chat With Customer Support</h1></div>
        <div id="chatbox">
        {this.state.messages}
        </div>
        <div id="bottom">
        <form onSubmit={this.send.bind(this)}>
        <span>
        <input value={this.state.chat} type="text" onChange={this.chatChange.bind(this)} id="chat" value={this.state.chat} />
        <button type="submit" id="send">Send</button>
        </span>
        </form>
        </div>
        </div>`
        );
}
}ReactDOM.render(<Chat name="seun" />,document.getElementById('app')):</code>

类消息扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
`
{this.props.msg}{this.props.sent}
`）；
}
}
类Chat扩展了React.Component{
建造师（道具）{
超级（道具）；
此值为0.count；
this.state={chat:''，消息：[]，已发送：[]}；
}
更改（事件）{
this.setState（{chat:event.target.value}）；
}
发送（e）{
e、 预防默认值（）；
设x=this.state.messages；
this.setState（{messages:x.concat（[]）}）；
this.setState（{chat:'}）；
设置超时（（）=>{
this.setState（{sent:this.state.sent.concat（['sent']））}）；
这个.count++；
},1000);
}
渲染（）{
返回(
`
与客户支持聊天
{this.state.messages}
发送
`
);
}
}ReactDOM.render（，document.getElementById（'app'））：

---

组件将接收下一步操作的道具。

将此作为组件的键

 this.state.messages.length

---

React不允许您使用相同的键输入两个元素。这就是react虚拟DOM在重新渲染时如何区分更改的方式

您的代码笔非常好，唯一缺少的是消息组件的正确键

为了正确地反应渲染组件，每个组件应该有不同的键，所以我将代码段从

<Messages style="me" msg={this.state.chat} key={this.state.chat} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />

到

代码笔工作得很好

编辑 这就解决了这个问题

---

动态构建组件，而不是将组件保存为状态。每当整个组件重新启动时，检查此代码pen.io/abhirathore2006/pen/JbjjPx

，React将所有组件与以前的状态/键匹配。因此，如果在每次父级重新渲染时为子级指定唯一键，则子级也将重新渲染

提供一个函数，该函数在每次调用时生成唯一id

<Parent>
    <Child key={_.uniqueId('child_component')} />
</Parent>

请你用叉子叉我的笔，列出正确的方法好吗？通常我们在componentWillReceiveProps中使用setState。消息框确实在更新。这里的问题是，当您提交相同的文本时，它不会更新，因为React将更改视为消息虚拟DOM中已经存在的元素。您应该做的是为每条消息添加一个id。但是当修改

此.state.sent

时，

组件不会重新渲染，而是将组件保存到状态，动态构建它们。检查这个

<Parent>
    <Child key={_.uniqueId('child_component')} />
</Parent>