Question

我想为列表中的每个项目生成一行。我目前正在尝试实现此目标的方法如下：

<thead>
    <tr>
      <th>Title</th>
      <th>Date</th>
      <th>People</th>
      <th>Status</th>
    </tr>
</thead>
{ this.renderEvents() }

renderEvents() {
    const events = this.state.data;
    console.log(events);

    return (
      <tbody>
        { events.forEach((event) => {
          return (
            <tr>
              <td>{event.title}</td>
              <td>{event.startDate}</td>
              <td>{event.userList.length}</td>
              <td><Badge color="success">Coming</Badge></td>
            </tr>
          );
        })}
      </tbody>
    );
}

我当前面临的问题是console.log（events）行执行了两次，并且该表保持为空。

感谢您的帮助！：）

Answer 1

Array#forEach不返回新数组。试试Array#map吧！

return (
  <tbody>
    { events.map((event) => {
      return (
        <tr>
          <td>{event.title}</td>
          <td>{event.startDate}</td>
          <td>{event.userList.length}</td>
          <td><Badge color="success">Coming</Badge></td>
        </tr>
      );
    })}
  </tbody>
);

Answer 2

另一种方法

render(){
  const data = events.map(
    event => {
      <tbody>
        <tr>
          <td>{event.title}</td>
          <td>{event.startDate}</td>
          <td>{event.userList.length}</td>
          <td><Badge color="success">Coming</Badge></td>
        </tr>
      </tbody>
    })

  return (
    <div>
      {data}
    </div>
  )
}

Answer 3

更多React惯用的解决方案是使用React组件而不是调用返回jsx的函数。组件只创建一次并挂载一次，相反，函数每次都会返回一个新组件（这意味着内存链接将更改），这将导致每次对React协调机制进行挂载和卸载。这对React性能不利。

我建议以另一种方式构造代码：

class EventViewer extends React.Component {
     // keep logic of fetching events here and saving them (to state for example)

    render() {
        return (
            <table>
                <EventVieverHeader />
                <EventVieverBody events={this.state.events}/>
            </table>
        )
    }

}

const EventVieverHeader = () => (
    <tr>
        <td>{event.title}</td>
        <td>{event.startDate}</td>
        <td>{event.userList.length}</td>
        <td><Badge color="success">Coming</Badge></td>
    </tr>
);


const EventVieverBody = ({events}) => (
    <tbody>
        {events.map(
            event => {
                <tr>
                    <td>{event.title}</td>
                    <td>{event.startDate}</td>
                    <td>{event.userList.length}</td>
                    <td><Badge color="success">Coming</Badge></td>
                </tr> 
        })}
     </tbody>
    )

在React中动态填写表单

3 个答案: