反應，道具

Question

在方法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> 
      ) 
     }) 
    } 

Answer 1

這是因爲在週期的不同方法，你必須給屬性「鑰匙」重複元件。 https://facebook.github.io/react/docs/lists-and-keys.html