我如何在 React 中运行另一个 function ？

Question

在我的代码中，我有loadData()和useFilter() 。 我尝试先运行loadData() ，因为需要为useFilter()设置productsData来处理productsData 。 但是，我尝试了.then()但是当我控制台日志useFilter()时它仍然给我undefined我该如何解决这个问题？

  const [productsData, setProductsData] = useState(null);

  const loadData = async () => {
    const { data } = await getAxios().get('/market/list').then(response => response.data)
    setProductsData(data)
  }

  const useFilter = () => {
    return productsData.map(data => (...))
    //filters productsData
  };

  useEffect(()=>{
    loadData().then(()=>useFilter());
  },[])

Answer 1

更改 state异步。 所以在更改后立即使用 state 可能不会更新一个。

在 state 更改后，您可以使用useEffect调用您的 function。

你可以这样做：

const [productsData, setProductsData] = useState(null);

const useFilter = () => {
  return productsData.map(data => (...))
  //filters productsData
};

useEffect(()=>{
  const loadData = async () => {
    const { data } = await getAxios().get('/market/list').then(response => response.data)
    setProductsData(data)
  }
  loadData()
},[])

useEffect(()=>{
  useFilter();
},[productsData])

Answer 2

您好，仅通过进行 function 异步不会使其返回 promise 以便使用。然后在 function 调用上，您必须确保他们返回承诺

所以你可以做的一种实现是：

    const [productsData, setProductsData] = useState(null);

  const loadData = () => {
    return getAxios().get('/market/list').then(response => response.data)
  }

  const useFilter = () => {
    return productsData.map(data => (...))
    //filters productsData
  };

  useEffect(()=>{
    loadData().then((data)=>{
    setProductsData(data);
    useFilter();
    }
   );
  },[])

在上述实现中，我返回 axios 返回的 promise 您也可以通过创建 promise 来返回您自己的 promise

如果您遇到任何问题，请告诉我