reactjs 除非将不相关的useState设置为true，否则不会调用useEffect

vof42yt1 于 2023-05-06 发布在 React

关注(0)|答案(2)|浏览(142)

我是React的新手，在使用useState/useEffect时遇到了问题：

function WinesInMyCave() {
  const [winesList, setWinesList] = useState({});
  const [isDataLoading, setDataLoading] = useState(false);

  useEffect(() => {
    console.log("Got this far 1");
    async function fetchWine() {
      console.log("Got this far 2");
      setDataLoading(true);
      const response = await fetch("http://localhost:3000/api/wines", {
        method: "GET",
      })
      const { winesList } = await response.json()
      setWinesList(winesList)
      setDataLoading(false)
    }
    fetchWine()
  }, []);

  console.log(winesList);
  console.log(isDataLoading);

return (
...
)

使用我添加的console.logs，我看到useEffect从未被调用，因此fetchWine函数也没有被调用。
如果我设置const [isDataLoading, setDataLoading] = useState(**true**);
我看到useEffect被称为（“Got this far”1 & 2 showing）
有人能帮帮我吗
先谢谢你了

reactjs

来源：https://stackoverflow.com/questions/76172107/useeffect-is-not-called-unless-a-not-related-usestate-is-set-to-true

2条答案

按热度按时间

nhaq1z211#

尝试只在useEffect中保留函数调用。
将函数本身放置在外部
此外，只有在获得数据后才将loading设置为false。
代码应该看起来像这样：

function WinesInMyCave() {
  const [winesList, setWinesList] = useState({});
  const [isDataLoading, setDataLoading] = useState(true);

  async function fetchWine() {
    const response = await fetch("http://localhost:3000/api/wines", {
      method: "GET",
    })
    const { winesList } = await response.json()
    setWinesList(winesList)
    setDataLoading(false)
    console.log(winesList);
    console.log(isDataLoading);
  }

  useEffect(() => {
    fetchWine()
  }, []);

return (
...
)

赞(0）回复(0）举报 2023-05-06

s6fujrry2#

解决方案如下：

function WinesInMyCave() {
const [winesList, setWinesList] = useState([]);
const [isDataLoading, setDataLoading] = useState(false);

useEffect(() => {
async function fetchWine() {
  setDataLoading(true);
  const response = await fetch("http://localhost:3000/api/wines", {
    method: "GET",
  });
  const winesList = await response.json();
  setWinesList(winesList);
  setDataLoading(false);
}
fetchWine();
}, []);

return (
...
)

我设置了winesList有一个对象，但是API发送了一个数组，而且它需要删除const { winesList } = await response.json()的{}，因为它不需要解构常量。
谢谢你的帮助！

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 除非将不相关的useState设置为true，否则不会调用useEffect

2条答案

相关问题

热门标签

最新问答