您可以使用异步函数通过 useState 设置初始状态吗

Question

我的组件依赖于本地状态（useState )，但初始值应来自 http 响应。

我可以传递一个异步函数来设置初始状态吗？如何从响应中设置初始状态？

这是我的代码

  const fcads = () => {
    let good;
    Axios.get(`/admin/getallads`).then((res) => {
      good = res.data.map((item) => item._id);
    });
    return good;
  };

  const [allads, setAllads] = useState(() => fcads());

但是当我尝试时console.log(allads)我得到了结果undefined。

Answer 1

您可以使用自定义挂钩来包含useStateuse -state-with-callback npm 包的回调函数。

npm install use-state-with-callback

对于你的情况：

import React from "react";
import Axios from "axios";
import useStateWithCallback from "use-state-with-callback";

export default function App() {
  const [allads, setAllads] = useStateWithCallback([], (allads) => {
    let good;
    Axios.get("https://fakestoreapi.com/products").then((res) => {
      good = res.data.map((item) => item.id);
      console.log(good);
      setAllads(good);
    });
  });

  return (
    <div className="App">
      <h1> {allads} </h1>
    </div>
  );
}

演示和代码：https://codesandbox.io/s/distracted-torvalds-s5c8c ?file=/src/App.js