仅在 useEffect 之后使用数据

Question

我有一个反应组件（用 Typescript 编写），如下所示。

在这个组件中，我尝试读取 excel ，其中我有数据，然后使用数据来渲染组件

由于在运行useEffect之前未读取数据，因此 menuData 被初始化为null 。

读取数据工作正常，menuData 没有错误。

但是，行let meals = [...new Set(menuData.map((item: menuItem) => item.Meal))]; 抛出错误TypeError: menuData is undefined 。 我认为这是因为在 menuData 仍未undefined时（在 useEffect 运行之前）执行了这一行。

如何克服这个错误？ 换句话说，如何运行let meals = [...new Set(menuData.map((item: menuItem) => item.Meal))]; 在 useEffect 运行之后？

我想将此行保留在 useEffect 之外，因为需要对 menuData 对象数组执行更多的数组函数（map、filter...等）。

export const CategoryItems = ({ toggled }: CategoryItemsProps) => {
  
const [menuData, setMenuData] = useState<menuData | undefined>(undefined);

   /*Code to read the excel with menu items once the page is loaded.
  The sheet will be read only once*/
  useEffect(() => {
    let url = "data.xlsx";
........
....
.....
      setMenuData(XLSX.utils.sheet_to_json(worksheet, { raw: true }));

  }, []);

 let meals = [...new Set(menuData.map((item: menuItem) => item.Meal))];

  return (
    <div className={`category-items ${toggled ? "theme-dark" : "theme-light"}`}>
.
.
.
    //additional code to render the component based on the variable `meals`
.
.
.
      </div>
    </div>
  );
};

Answer 1

只需将您的 state 初始化为空数组即可。

const [menuData, setMenuData] = useState<menuData>([]);

那应该工作！

Answer 2

如果数据还没有到来，我个人喜欢退出渲染阶段，因为useEffect中的setState无论如何都会导致另一个渲染，所以没有必要再进一步了。

if (!menuData) return null;
let meals = [...new Set(menuData.map((item: menuItem) => item.Meal))];

null只是一种不渲染任何内容的简单方法..

我喜欢这种方式，如果你发现useEffect有时可能需要一些时间，而不是返回null ，我们也许可以返回某种形式的加载指示器。

if (!menuData) return <div className="loading">Loading..</div>;
let meals = [...new Set(menuData.map((item: menuItem) => item.Meal))];

将数据初始化为空的东西，但你有点松散了一些隐含的 state，如果你的渲染结构更复杂，早点退出我发现更容易推理..