如何在不同的文件或路由之间传递数据?

Question

我是新手反应，经过初学者的学习课程后反应。 我决定进行一个个人项目，创建一个每月订阅应用程序，以帮助我跟踪我的所有订阅。但是，我陷入了需要将一个组件的状态传递到另一个组件的地步，但另一个组件可以通过路由访问，顺便说一句，我正在使用 reach 路由器。有什么办法可以。下面是我的代码。所以我基本上想做的是，当我点击列表中的订阅时，(比如：Netflix(，它基本上应该带我去另一个页面，并向我显示有关该订阅的所有必要详细信息。在这里，我希望传递状态(mylist(。

应用.js

const App = () => {
return (
<div className="container">
<Router>
<List path="/" />
<Details path="/details/:sub" />
</Router>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

列表.js

const List = () => {
const [mylist, setList] = React.useState([]);
const [value, setValue] = React.useState({
subscription: "",
startDate: "",
paymentTime: 0,
});
const handleSubmit = (e) => {
mylist.push(value);
setList(mylist);
setValue({ subscription: "", startDate: "", paymentTime: 0 });
e.preventDefault();
};
const handleOnChange = (event) => {
setValue({ ...value, [event.target.name]: event.target.value });
};
return (
<div>
<div className="for_list">
<ul className="list">
{mylist.map((obj) => (
// <Link to={`/details/${obj.subscription}`} key={obj.subscription}>
<li key={obj.subscription}>{obj.subscription}</li>
/* </Link> */
))}
</ul>
</div>
<div className="for_form">
<form>
<input
type="text"
name="subscription"
onChange={handleOnChange}
value={value.subscription}
/>
<input
type="date"
name="startDate"
onChange={handleOnChange}
value={value.startDate}
/>
<input
type="number"
name="paymentTime"
onChange={handleOnChange}
value={value.paymentTime}
/>
</form>
</div>
<button onClick={handleSubmit}>Add Item</button>
</div>
);
};
export default List;

详情.js

const Details = (props) => {
return (
<div>
Dunno what to do ;(
</div>
);
};
export default Details;

Answer 1

React Router 使用location对象。location对象的属性之一是state。可以将一些数据字段传递给状态，然后在Details页面中，您将使用这些数据字段来获取每个相应订阅的数据。

在您的List.js：

...
const handleSubmit = (e) => {
e.preventDefault();
mylist.push(value);
setList(mylist);
setValue({ subscription: "", startDate: "", paymentTime: 0 });
props.histoty.push({
pathname: '/details/netflix',
state: {
id: 'netflix-id',
}
})
};
...
export default withRouter(List);

然后在您的Details.js：

import React, { useEffect, useState } from 'react'
import { withRouter } from 'react-router-dom'
const Details = (props) => {
const [subInfo, setSubInfo] = useState({})
useEffect(() => {
fetch(`your-server-api/${props.state.id}`).then(res => res.json()).then(data => setSubInfo(data))
}, [])
return (
<div>
...
</div>
);
};
export default withRouter(Details);

要记住的一件事是，如果用户直接导航到页面，则不会有状态，因此当数据不存在时，您仍然需要一些机制来加载数据。