如何在 REACT useEffect 函数中从 webservice 获取数据并将其发送到 props 对象？

Question

我正在尝试将数据从 Web 服务获取到子组件。看起来数据在 useEffect 函数内的 console.log() 中可以正常获取。我无法在更高的功能范围内使用它们。我想通过props对象访问子组件（PComponent）中获取的数据。

感谢您的建议。

function App(props) {
  let data = undefined;

  useEffect( () => {
    console.log('UseEffect');
    const  fetchData = async () => {
      const result = await axios.get(someUrl)
      data = result.data;             
      console.log('result',data);
      return data;
      
    };
    data = fetchData();
  }, []);
  
  return (
    <PComponent settings = {data}/>
  );
}

export default App;

Answer 1

尝试使用useState 挂钩来存储您的数据。任何状态更新都会重新渲染组件，因此数据会传递给子组件。

const App = (props) => {
   const [data, setData] = React.useState()
        
   const fetchData = async() => {
      const result = await axios.get(someUrl)
      setData(result);           
   };
        
   // Fetch data when component mounted
   useEffect( () => {
      fetchData()
   }, []);
          
   return (
      <PComponent settings={data}/>
   );
}

export default App;

Answer 2

您必须使用useState 来表示可以在功能组件中更改的状态。你可以阅读on the React docs。

function App(props) {
  const [data, setData] = useState(undefined);

  useEffect(async () => {
    console.log("useEffect running");
    const fetchData = async () => {
      const result = await axios.get(someUrl);
      console.log(result.data);
      return result.data;
    };
    setData(await fetchData());
  }, []);

  return <PComponent settings={data} />;
}