Question

我有一个ChatHistory组件，用于呈现最近的消息。这是ChatHistory render（）函数：

render() {

    let msgs = this.props.history.map((message) => {
        console.log(message)
          return (
                <li key={ message.date }>
                    <Segment>
                        <img src="public/imgs/kerbal.png" style={{"height" : "40px", "width" : "40px"}} />
                        <p>{message.text}</p>
                        <p>date in millis: {message.date}</p>
                    </Segment>
                </li>
            )
        });
    return (
      <div className="chat-history">
        <ul style={{"list-style" : "none", "padding" : "0 10px"}}>
            {msgs}
        </ul>
      </div>
    );
  }

如您所见，我正在将message对象打印到控制台。在对象中，message.text和message.date字段不为空，并包含正确的值。

呈现<li>元素时，文本和日期的<p>元素都为空。为什么会这样？

作为旁注，我在呈现第一条消息时在控制台中收到一个错误：

警告：数组或迭代器中的每个子节点都应该有一个唯一的“键” 支柱。检查ChatHistory
的渲染方法

正如您所看到的，我在<li>元素上设置了一个键，它是消息的日期（以毫秒为单位）（使用new Date().valueOf()），因此它们应该是唯一的。我不知道为什么会打印这个错误，而且，我不确定该错误是否与未呈现的<p>元素有关。

Answer 1

只是为了咧嘴笑，你可以尝试将img标签上的style属性更改为以下内容，看看会发生什么：

style="height:40px;width:40px;"

Answer 2

将密钥放在Segment上，而不是li。

<li>
    <Segment key={ message.date }>
        <img src="public/imgs/kerbal.png" style={{"height" : "40px", "width" : "40px"}} />
        <p>{message.text}</p>
        <p>date in millis: {message.date}</p>
    </Segment>
</li>

列表项中的空元素，但对象不为空

2 个答案: