Jsx返回对象并导致无限循环

Question

我正在学习React，并且我有此代码段，通过返回必要的JSX来构建html表（数据具有100多个对象条目）。

对于上下文，数据也是对象的数组：[{},{},{}]

const [trafficData, setTrafficData] = useState();

getTrafficDetails().then(r => {
    setTrafficData(r);
})

<TrafficWidget data={trafficData} />

消费于：

const TrafficWidget = ({ data }) => {
  let [trafficStatus, setTrafficStatus] = useState([]);

  if (data && data.length > 0) {
    const mapData = data.map((item) => {
      return (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.totalEmission}</td>
        </tr>
      );
    });
    setTrafficStatus(mapData);
  }

  return(<tbody>{trafficStatus}</tbody>)
}

我遇到的问题是，当我询问mapData数组时，它显示为{$$typeof: Symbol(react.element), type: "tr", key: "082", ref: null, props: {…}, …}，然后导致Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

为什么当我返回jsx时它会作为一个对象出现，为什么会导致无限循环？

Answer 1

import React, {  Fragment } from 'react'

const TrafficWidget = ({ data }) => {

      return(
     <tbody>
      data.map((item) => {
          return (
          <Fragment key={item.id}>
           <tr>
              <td>{item.name}</td>
              <td>{item.totalEmission}</td>
            </tr>
           </Fragment>

          );
        });
       </tbody>
      )
    }

Answer 2

您每次用.map创建一个新的数组对象，导致在每次渲染调用时状态都改变，从而迫使其在循环中重新渲染。由data更改触发的重新渲染应该足以表明需要重新渲染。应该使用State来存储和更改data的状态或将其作为道具提供给组件的其他方式。不用于存储您的组件。

您可以直接在渲染循环中提供映射的组件。

const TrafficWidget = ({ data }) => {
  // NOTE: You actually don't need to check the length here.  Empty arrays are handled like no-op.
  const trafficStatus = 
          data && data.length > 0 && data.map((item) => {
            return (
              <tr key={item.id}>
                <td>{item.name}</td>
                <td>{item.totalEmission}</td>
              </tr>
            );
          });
  return(<tbody>{trafficStatus}</tbody>);
}