时间戳

首页 > 解决方案 > Jsx 返回对象并导致无限循环

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

问题描述

我正在学习 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 时它会作为一个对象出现，为什么这会导致无限循环？

标签： javascriptreactjs

解决方案

const { Fragment } = React

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


let data = [
  {
    name: "Henry",
    totalEmission: 500,
    id: "936-DEF12"
  },
  {
    name: "Nick",
    totalEmission: 200,
    id: "843-7266B"
  },
]

ReactDOM.render(<TrafficWidget data={data} />, document.getElementById('main'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main id="main">loading or error...</main>

推荐阅读