使用 React Router 发送到另一个组件的 props 显示为未定义和 [object%20Object]

Question

使用ReactJS和React Router，我正在尝试将某人在搜索栏中写入的内容发送到另一个组件。我尝试在 React 链接中传递一个对象，但由于某种原因它不起作用。在有向组件中，它显示为未定义，在 url 中它显示为/search/[object%20Object].

下面的代码位于搜索组件中，其中searchValue是用户输入的内容。到目前为止，searchValue确实保持正确的值。

<Link
to={{
pathname: "/search/" + { searchValue },
state: { sentinfo: searchValue },
}}

这就是我尝试读取我发送到的组件中的道具的方式：

const { foo } = this.props.location.state;
console.log(foo);

它显示了undefined在这里。我不确定是什么原因造成的。

Answer 1

因为您已将对象传递到 url 中

<Link
to={{
pathname: "/search/" + { searchValue },
state: { sentinfo: searchValue },
}}/>

以 JSX 格式传递它

<Link
to={{
pathname: `/search/${searchValue}`,
state: { sentinfo: searchValue },
}}/>

然后您可以将发送信息用作

const foo = this.props.location.state.sentinfo;

根据我的建议，您已经将 searchValue 传递到 url 中，因此无需将相同的值传递到状态中。您可以使用此this.props.match.params语法访问 url 参数。