如何通过一个按钮从一个组件解析数据到另一个组件

Question

你好，我想知道是否有可能从一个组件的按钮解析数据到另一个组件。我知道可以通过以下方式解析数据：

<Component data = {data} />

但我希望通过一个按钮来发送它，因为当我发送数据时，我需要更改"页面"，如果这有意义的话？

我尝试了以下内容（只是一个示例）：

const sendData= () => {
    <Component data = {data} />
    history.push("/sendData");
  };

<Button onClick={sendData} >Click to send data</Button>

我收到了如下输出结果：

从输出结果可以看出，我正在发送一些数据，但是却得到了undefined的返回值。我之前问过类似的问题，但没有得到恰当的答案，也没有找到解决方法。

欢迎任何提示、帮助和文档。

编辑：这就是我想要发送的内容 ->

我想要将保存在变量中的所有数据发送到另一个页面，以便我可以在那里使用它们。

- ReactPotato

Answer 1

由于您需要在无法发送props的两个组件之间进行通信，因此有两个选项：

1. 在两个页面（组件）之间使用共同状态。您可以将状态提升或使用“不太本地”的状态，如React Context。

2. 如果您已经设置了react-router，则还可以通过历史位置对象传递数据，然后使用useLocation hook稍后读取它。

在第一个组件中：

const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

在其他组件中：

let location = useLocation();
let state = location.state ;

这里是文档 https://reactrouter.com/web/api/location

- Reetesh Kumar

---

我有点困惑，位置不是用来检查你在哪里/你想去哪里/你曾经在哪里吗？ - ReactPotato

@ReactPotato 不，它用于检查您所处的位置。 - Reetesh Kumar

对不起，那不是我想做的，我想通过一个按钮来解析数据。历史记录在那里，因为当我点击按钮时，它会将我移动到另一个位置，我想解析数据到那个位置。 - ReactPotato

是的，它将适用于您的用例。您将在第一页中推送一些数据到位置，并在另一页中读取它。这正是您想要的。只需尝试一下。 - Reetesh Kumar

这个可行，但我真的不明白它是如何工作的...现在非常令人困惑哈哈哈，哇谢谢啊。就像我不明白它是如何跟踪如此模糊的东西的。 - ReactPotato

这是我做的：const location = { pathname: '/Crear_Pedidos', data: studentsID }然后在第二个组件中：let location = useLocation(); let data = location.data; 我不明白它是如何跟踪的，就像它如何知道它被称为位置并且有来自另一个组件的.data，当我在第一个组件中甚至没有使用useLocation();。无论如何，非常感谢，这将对我有很大帮助。 - ReactPotato