如何將數據從一個反應組件發送到另一個反應組件？

Question

在這里，我從“訂單”組件中獲取了一些數據，然后我想將此數據發送到 Navigate，但在“導航”中使用“props.order_data”時得到的所有數據都是未定義的。 如何在“導航”中使用這些數據？

function App(){

  function getData(some){
    console.log(some);
    return(<Navigate order_data= {some}/>);
  }
  return(
    <div>
      <Navigate />
      <Service/>
      <Order onAdd={getData}/>
      <Review />
      <Foot />
  </div>
  );
}
export default App;

Answer 1

由於getData function 的返回值被傳遞給Order組件的onAdd function，因此您嘗試執行的操作將不起作用。

我建議您為 App 組件中的order_data創建一個 state 並將 state 作為道具傳遞給您要返回的Navigate元素。 檢索數據后（例如在getData函數中），您將需要更新 state。

一旦 state 發生變化，React 將負責更新組件。

有關更多詳細信息，請參閱 React 文檔： https://reactjs.org/docs/lifting-state-up.html

Answer 2

您需要使用useState掛鈎來維護 state。 由於您在同一個 Parent App中有Navigate和Order組件。

這樣做

 import { useState } from "react";

 function App(){

  const [some, setSome] = useState(null); // Initial some value is null

  function getData(data){
    setSome(data); // This will update some state value
  }
  return(
    <div>
      <Navigate order_data={some}/> 
      <Service/>
      <Order onAdd={getData}/>
      <Review />
      <Foot />
  </div>
  );
}
export default App;