Question

给出了简单的反应聊天容器，它成功地用LoadConversationInformation函数抓取数据如下

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>
        );
    }
});

需要检查data的第一个元素是否存在某个属性，如果是，则将其添加到单独的状态变量中，如下所示：

     ...
        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

rewrite ^(.*[^/])$ $1/ permanent;

也许你需要在这里使用道具，而不是状态？

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>
            );
        }
    });

Answer 2

导致MessageContainer的状态一无所获。您在MessageContainer中使用的状态是ConversationContainer的状态。尽管MessageContainer是ConversationContainer的子代，但它无法获取它的父组件即ConversationContainer的状态。你应该将hasContactRequest传递给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中：

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 3

MessageContainer没有状态，这就是你收到错误的原因。

您应该将hasContactRequest作为支持传递给MessageContainer

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

并使用它

 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>
            );
        }
    });

是否可以在reactjs中设置多个状态变量？

3 个答案: