Question

我已经有了一个州：

 this.setState({
      conversation:
          (
            <div>
              {conversation.map(element => {
                 if (element.id === this.props.id) {
                      return(
                        <div className="row msg_container base_sent">
                          <div className="col-md-10 col-xs-10">
                             <div className="messages msg_sent">
                                 <p>{element.message}</p>
                             </div>
                             </div>
                        </div>
                   )
             }
              else {
                 return(
                     <div className="row msg_container base_receive">
                        <div className="col-md-10 col-xs-10">
                          <div className="messages msg_receive">
                              <p>{element.message}</p>
                          </div>
                      </div>
                      </div>
                )
               }
             })}
           </div>
          )
       })

现在我想用新信息更新它。所以添加另一个div。

类似的东西：

this.setState({conversation: previousConversation + new div})

我该怎么办？或者我需要从零开始设置一个新状态

Answer 1

根据React docs：

状态应该怎样？   状态应包含组件的事件处理程序可能更改的数据以触发UI更新。在真实的应用程序中，这些数据往往非常小并且可以进行JSON序列化。构建有状态组件时，请考虑其状态的最小可能表示，并仅将这些属性存储在this.state中。在render（）内部，只需根据此状态计算您需要的任何其他信息。您会发现以这种方式思考和编写应用程序往往会导致最正确的应用程序，因为向状态添加冗余或计算值意味着您需要明确地使它们保持同步而不是依赖React计算它们你。

什么不应该进入州？ this.state应该只包含最小值   表示UI状态所需的数据量。因此，它应该   不包含：

计算数据：不要担心根据状态预先计算值 -   如果你做所有的话，更容易确保你的用户界面是一致的   render（）中的计算。例如，如果您有一个列表数组   状态中的项目，您只想将计数呈现为字符串   渲染this.state.listItems.length +＆＃39;列出项目＆＃39;在你的渲染（）   方法而不是将其存储在状态。反应组件：构建它们   在render（）中基于底层的道具和状态。来自的重复数据   道具：尽可能使用道具作为真理的来源。一   有效用于存储状态中的道具是能够知道它以前的   值，因为道具可以随着时间的推移而改变。

在您的情况下，将您的html移动到渲染功能中。然后在你的状态中存储一个条件或数据，用于触发向你的html添加另一个div，或者通过有条件地渲染一些html，或者通过在.map函数内添加另一个div来基于向你的状态添加更多数据

示例：

Class Example render React.Component{
  state = {
    comments: [
      { message:"comment 1", id: 1, timeStamp: "" },
      { message:"comment 2", id: 2, timeStamp: "" },
      { message:"comment 3", id: 3, timeStamp: "" }
    ]
  }

  componentDidMount = () => {
    //update data from api...
    .then(data => this.setState({ comments: data }))
  }

  render(){
    conversation.map(element => {
      if (element.id === this.props.id) {
        return(
          <div className="row msg_container base_sent">
            <div className="col-md-10 col-xs-10">
              <div className="messages msg_sent">
                <p>{element.message}</p>
              </div>
            </div>
          </div>
        )
      }
      else {
        return(
          <div className="row msg_container base_receive">
            <div className="col-md-10 col-xs-10">
              <div className="messages msg_receive">
                <p>{element.message}</p>
              </div>
            </div>
          </div>
        )
      }
    })
  }
}

Answer 2

我认为将jsx组件存储在组件状态中并不是一个好主意。我认为您应该只将数据保存在呈现组件所需的状态。

如果您真的想在州内存储jsx，为什么不将“conversation”属性定义为数组？然后，您将能够为其添加新组件。

Nothing

但最好只存储数据，即'first'和'new div'

将元素添加到状态React

2 个答案: