javascript - ReactJS:单独渲染状态而不是作为数组

Question

我最终实现了我想要的。然而，它给了我一个状态数组，而不是单独渲染每个状态。这可能非常简单，我很可能将其过于复杂化，但是嘿，任何帮助都会很好。

Here's what I currently am dealing with

这是一个更好的例子:/image/4STTN.gif

最后，这可能是最好的概述:/image/eOyYh.jpg

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
    }
  }

  ws = new WebSocket(URL)

  componentDidMount() {
    this.ws.onopen = () => {
      console.log('connected')
    }

    this.ws.onmessage = e => {
      const tbox = JSON.parse(e.data);
      if(tbox.data && tbox.data.length > 0){
      this.setState({
          data : this.state.data.concat(tbox.data[0]),
        })
      }
    }

    this.ws.onclose = () => {
      console.log('disconnected')
      this.setState({
        ws: new WebSocket(URL),
      })
    }
  }

  render() {
   let { data } = this.state;

   const chatBox = data.map(item => {
    return (
      <List
      key={item.id}
      dataSource={this.state.data}
      renderItem={item => (
        <List.Item >
          <List.Item.Meta
            avatar={<Avatar size="large" icon="user" />}
            title={<div><a href="https://example.com">{item.user}</a> {item.date}</div>}
            description={item.message}
          />
        </List.Item>
      )}
    >
    </List>
    )
  })

   return (
      <div>
        <div>
          {chatBox}
        </div>

我正在尝试循环状态并分别渲染每条消息

Answer 1

我认为你不需要循环遍历 this.state.data[]因为您已经将数据源设置为 antd <List>成分。 antd List组件为我们处理对象的集合。这将是渲染您的 this.state.data 的代码:

const chatBox = <List dataSource={this.state.data}
      renderItem={item => (
        <List.Item >
          <List.Item.Meta
            avatar={<Avatar size="large" icon="user" />}
            title={<div><a href="https://example.com">{item.user}</a> 
            {item.date}</div>}
            description={item.message}
          />
        </List.Item>
      )}
    >
    </List>;

您可以查看这些链接:

• https://stackblitz.com/run
• https://ant.design/components/list/