Question

我的代码是 here。

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

但是，它没有显示。

当我移除 useEffect 钩子时，它起作用了。

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

Answer 1

在 react 中，只有在 state 或 prop 发生变化时才会渲染组件。在您的代码库中，rowList 是一个变量而不是一个状态。如果你把它转换成状态，它应该可以工作。

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>;
}

为什么 useEffect 钩子不适用于上下文中的状态变量？

1 个答案: