反应,道具
问题描述:
在方法render()
周期我称之为周期与子元素与this.state.objects.map(item, id)
反应,道具
conversationTemplate = this.state.objects.map(function (item, index) {
return (
<Panel eventKey={index}>
<h4> {item.msg_text} </h4>
<ReactMessageChat conversationId={item.pk}> {item.pk} </ReactMessageChat>
</Panel>
)
}
当有新的项目出现渲染重启,但在子元素ReactMessageChat
始终保持在周期第一道具conversationId
。
class ReactMessageChat extends React.Component {
constructor(props) {
super(props);
this.state = {
objects: [],
loaded: false,
};
this.addNewMsg = this.addNewMsg.bind(this);
this.subscribe = this.subscribe.bind(this);
}
subscribe() {
return centrifuge;
}
loadDataFromServer(conversationId) {
let self = this;
var url = '/api/support_messages/?msg_conversation=' + conversationId
...
}
addNewMsg(message) {
let self = this;
if (message.msg_conversation == self.props.conversationId) {
var newArray = self.state.objects;
newArray.push(message);
self.setState({objects: newArray});
}
}
componentDidMount() {
this.loadDataFromServer(this.props.conversationId);
this.subscribe();
}
render() {
let self = this;
var messagesTemplate;
if (self.state.objects.length > 0) {
let reversedObjects = self.state.objects.reverse();
messagesTemplate = reversedObjects.map(function (item, index) {
return (
<li className="list-group-item" key={index}>
{item.msg_text}</li>
)
})
}