我如何在 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

如果您遇到任何問題，請告訴我