如何将数据从一个反应组件发送到另一个反应组件？

Question

在这里，我从 'Order' 组件获取了一些数据，然后我想将这些数据发送到 Navigate，但是在 'Navigate' 中使用 'props.order_data' 时我得到的所有数据都是未定义的。我如何在 'Navigate' 中使用这些数据？

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 函数的 return-value 被传递给 Order-组件的 onAdd 函数，因此您尝试执行的操作将不起作用。

我建议您在 App-component 中为 order_data 创建一个状态，并将该状态作为 prop 传递给要返回的 Navigate 元素。您需要在检索数据后立即更新状态（例如，在 getData 函数中）。

一旦状态发生变化，React 就会负责更新组件。

有关详细信息，请参阅 React 文档： https://reactjs.org/docs/lifting-state-up.html

Answer 2

您需要使用 useState 挂钩来维护状态。由于您的 Navigate 和 Order 组件位于同一父 App.

这样做

 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;

如何将数据从一个反应组件发送到另一个反应组件？

How to send data from one react component to another react component?

javascript

reactjs

react-props