reactjs - 使用来自 axios 的响应更新 useContext

Question

我想使用 axios 更新上下文形式的响应，以便我可以在另一个页面上的另一个组件中使用它

const search = (min, max, l, r) => {
    if (min == null) min = 0;
    if (max == null) max = 2000000;
    if (l === "") l = "Tirane";
    if (isNaN(r)) r = 0;
    axios
      .get("/////", {
        params: {
          MaxValue: max,
          MinValue: min,
          city: l,
          rooms: r,
        },
      })
      .then((response) => {
        console.log(response.data);
        setSearchData(response.data);
        console.log(searchData);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

export const SearchContext = createContext();

export const SearchProvider = (props) => {
  const [searchData, setSearchData] = useState([]);

  return (
    <SearchContext.Provider value={[searchData, setSearchData]}>
      {props.children}
    </SearchContext.Provider>
  );
};

当我控制台 searchData 它显示一个空数组。

Answer 1

首先，您必须在 SearchProvider 组件中添加一些数据获取逻辑。

export const SearchProvider = (props) => {
  const [searchData, setSearchData] = useState([]);

  // do not forget to add useEffect hook import
  useEffect(async () => {
      const { data } = await axios
          .get("/////", {
            // add your params
           },
         })

    setSearchData(data);
  });

  return (
    <SearchContext.Provider value={[searchData, setSearchData]}>
      {props.children}
    </SearchContext.Provider>
  );
};

您可以在另一个组件中使用 SearchContext.Consumer 来获取您的值并在那里实现数据获取。

<SearchContext.Consumer>
    {([searchData, setSearchData]) => {}}
</SearchContext.Consumer>

在那里你必须实现一些数据获取机制，并调用