为什么 useEffect 挂钩在上下文中不适用于 state 变量？

Question

我的代码在这里。

我希望应该显示数组testingData的内容。

但是，它没有显示出来。

当我删除useEffect挂钩时，它可以工作。

你能告诉我为什么以及如何解决它吗？

Answer 1

在反应中，组件仅在有任何 state 或 prop 更改时才会呈现。 在您的代码库中， rowList是一个变量，而不是 state。 如果将其转换为 state，它应该可以工作。

import React, { useContext, useEffect, useState } from "react";
import WebContext from "./WebContext";
export default function QQTableBody(props) {
  let { testingData, setTestingData } = useContext(WebContext);
  const [rowList, setRowList] = useState([]);
  // let rowList=[];
  useEffect(() => {
    const list = [];
    testingData.forEach(data => {
      list.push(
        <tr>
         <td>{data}</td>
        </tr>
     );
   });
    setRowList(list);
   }, [testingData]);
 
   return <tbody>{rowList}</tbody>;
}