reactjsに複数の状態変数を設定することは可能ですか？

Question

dataの最初の要素でいくつかの属性が存在する場合はそうである場合、チェック別個の状態変数に追加する必要がある

var ConversationContainer = React.createClass({ 
    LoadConversationInformation: function() { 
     jQuery.ajax({ 
      url: this.props.getMessageUrl, 
      dataType: 'json', 
      cache: false, 
      success: function (data) { 
       this.setState({data: data}); 
      }.bind(this), 
      error: function (xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     }); 
    }, 
    ... 
    render: function() { 
     var Chat = this.state.data.map(function (message) { 
      return (
       <MessageContainer message={message} key={message.id}/> 
      ); 
     }); 
     return (
      <div> 
       {Chat} 
       <MessageForm onMessageSubmit={this.handleMessageSubmit}/> 
      </div> 
     ); 
    } 
}); 

を以下のようにsuccessully LoadConversationInformation機能とデータをグラブチャット容器を、反応これは簡単与えられます、このような：

 ... 
     success: function (data) { 
      if ('hasContactRequest' in data[0]) { 
       this.setState({ 
        data: data, 
        hasContactRequest: data[0].hasContactRequest 
       }); 
      } 
      else { 
       this.setState({data: data}); 
      } 
     }.bind(this), 
     error: function (xhr, status, err) { 
      console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    ... 

そのためConversationContainer子検査で可能にし、それはこのように、存在する場合、いくつかの要素をレンダリングする：

var MessageContainer = React.createClass({ 
     render: function() { 
      return (
       <li className={(this.props.message.type === 'sender') ? 'sender' : 'receiver'}> 
        <MessageImage /> 
        <MessageDate date={this.props.message.date}/> 
        <MessageText text={this.props.message.text}/> 
        {(this.state.hasContactRequest ? <MessageSendContacts/> : null)} 
       </li> 
      ); 
     } 
    }); 

一般チャット機能していますが、私はこの追加の状態変数を追加することのない運を取得していないカント、およびthis.state.hasContactRequest などのアクセス、それが得た： Uncaught TypeError: Cannot read property 'hasContactRequest' of null

を適切にそれを行うには？

Answer 1

MessageContainerに状態がないため、そのエラーが発生しています。

あなたのMessageContainerに小道具として

var Chat = this.state.data.map(function (message) { 
      return (
       <MessageContainer hasContactRequest={this.state.hasContactRequest} message={message} key={message.id}/> 
      ); 
     }); 

をhasContactRequest渡し、たぶん、あなたは状態、ここに小道具を使用する必要はありません

var MessageContainer = React.createClass({ 
     render: function() { 
      return (
       <li className={(this.props.message.type === 'sender') ? 'sender' : 'receiver'}> 
        <MessageImage /> 
        <MessageDate date={this.props.message.date}/> 
        <MessageText text={this.props.message.text}/> 
        {(this.props.hasContactRequest ? <MessageSendContacts/> : null)} 
       </li> 
      ); 
     } 
    }); 

Answer 2

var MessageContainer = React.createClass({ 
     render: function() { 
      return (
       <li className={(this.props.message.type === 'sender') ? 'sender' : 'receiver'}> 
        <MessageImage /> 
        <MessageDate date={this.props.message.date}/> 
        <MessageText text={this.props.message.text}/> 
        {(this.state.hasContactRequest ? <MessageSendContacts/> : null)} 
       </li> 
      ); 
     } 
    }); 

それを使用する必要がありますか？

{(this.state.hasContactRequest ? <MessageSendContacts/> : null)} 

Answer 3

MessageContainerの状態が何も得られません。 MessageContainerで使用した状態はConversationContainerの状態です。 MessageContainerはConversationContainerの子ですが、親のComponent、つまりConversationContainerの状態を取得することはできません。 MessageContainerで、その後

render: function() { 
    var Chat = this.state.data.map(function (message) { 
     return (
      <MessageContainer message={message} hasContactRequest={this.state.hasContactRequest} key={message.id}/> 
    ); 
    }); 
    return (
     <div> 
      {Chat} 
      <MessageForm onMessageSubmit={this.handleMessageSubmit}/> 
     </div> 
); 
} 

：あなたはこのような小道具としてMessageContainerにhasContactRequestを渡す必要があり

return (
<li className={(this.props.message.type === 'sender') ? 'sender' : 'receiver'}> 
    <MessageImage /> 
    <MessageDate date={this.props.message.date}/> 
    <MessageText text={this.props.message.text}/> 
    {(this.props.hasContactRequest ? <MessageSendContacts/> : null)} 
</li> 

）。