reactjs - React 不会立即设置状态

Question

我刚开始学习reactjs。我正在尝试使用从 API 接收的对象设置状态，然后显示状态的结果。当我尝试显示结果时，它显示状态对象未定义。当我第二次查询 API 时，它会将状态设置为从 API 接收的对象。

const SearchByName = () => {
  const [recipes, setRecipes] = useState({
    recipesObj: {},
    loding: false,
  });


  const fetchData = async () => {
    try {
      setRecipes({ loading: true });

      const res = await axios.get(`url_to_API`);

      console.log(res.data) // prints returned object from API

      setRecipes({ recipesObj: res.data, loading: false });

      console.log(recipes.recipesObj); // empty object

    } catch (err) {
      console.error(err);
    }
  };
};

 const onSubmit = (e) => {
    e.preventDefault();
    fetchData();
    setSearchStr('');
  };

标签： reactjs

Answer 1

您将状态替换为{ loading: true }，此处recipes.recipesObj将变为未定义。您需要预先添加较早的状态。尝试像这样更改，或者您可以使用不同state的方式来管理loading and data

const fetchData = async () => {
    try {
      setRecipes({ ...recipes, loading: true }); // Here was the problem
      or setRecipes({ recipesObj: {}, loading: true });

      const res = await axios.get(`url_to_API`);

      console.log(res.data) // prints returned object from API

      setRecipes({ recipesObj: res.data, loading: false });

      console.log(recipes.recipesObj);

    } catch (err) {
      console.error(err);
    }
  };
};