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

Question

我正在尝试从网络服务获取数据到子组件。看起来数据在 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} />;
}

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

how to fetch data from webservice in REACT useEffect function and send it to props object?

fetch

reactjs

react-props

use-effect