Next.js 13异步组件内访问Redux状态出现useContext报错问题

我的代码如下：

"use client"
import SearchResults from "./searchResults";
import axios from "axios";

import { useSelector } from "react-redux";

const getRecipe = async () => {
  const response = await axios.get(
    `https://api.edamam.com/api/recipes/v2?type=public&q=cake&app_id=API_ID&app_key=API_KEY`
  );
  const data = await response.data;

  return data;
};

const SearchRecipe = async () => {
  const recipes = await getRecipe();
  const searchTerm = useSelector((state) => state.recipe.value.searchTerm);
  return (
    <div>
      
    </div>
  );
};

export default SearchRecipe;

我尝试通过const searchTerm = useSelector((state) => state.recipe.value.searchTerm);从Redux Toolkit创建的slice中获取searchTerm状态，但运行该组件时出现错误：“Error: Cannot read properties of null (reading 'useContext')”，这个用法在其他组件里是正常的。

问题原因 #

你把SearchRecipe定义成了async函数组件，但React不支持异步函数作为组件——async函数返回的是Promise对象，而React组件要求返回React元素、null或者其他合法的React节点。这种情况下，React无法正确处理组件的上下文（包括Redux的Context），所以会抛出useContext相关的错误。

解决方案 #

把组件改成普通函数，用useEffect处理异步请求，并用useState保存请求结果：

"use client"
import { useState, useEffect } from "react";
import SearchResults from "./searchResults";
import axios from "axios";
import { useSelector } from "react-redux";

const getRecipe = async () => {
  const response = await axios.get(
    `https://api.edamam.com/api/recipes/v2?type=public&q=cake&app_id=API_ID&app_key=API_KEY`
  );
  return response.data;
};

const SearchRecipe = () => {
  const [recipes, setRecipes] = useState(null);
  const searchTerm = useSelector((state) => state.recipe.value.searchTerm);

  useEffect(() => {
    const fetchRecipes = async () => {
      const data = await getRecipe();
      setRecipes(data);
    };
    fetchRecipes();
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  if (!recipes) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 这里可以渲染recipes和searchTerm相关内容 */}
    </div>
  );
};

export default SearchRecipe;

额外说明 #

• 组件顶层不能直接用await，必须把异步逻辑放在useEffect内部的async函数里
• 用useState管理recipes的状态，这样请求完成后能触发组件重新渲染
• 增加加载状态的判断，避免在数据未返回时出现异常

内容的提问来源于stack exchange，提问作者basil vj