reactjs - 如何在不同的文件或路由之间传递数据?
问题描述
我是新来的反应,在初学者学习课程后反应。我决定进行一个创建每月订阅应用程序的个人项目,该应用程序将帮助我跟踪我的所有订阅。但是,我被困在一个点,我需要将一个组件的状态传递给另一个组件,但另一个组件可以通过路由访问,顺便说一句,我正在使用到达路由器。有没有可能的方法。下面是我的代码。所以我基本上想要做的是,当我点击我列表中的订阅时,(比如:Netflix)它基本上应该带我另一个页面,并向我展示有关该订阅的所有必要细节。在这里,我希望通过状态(mylist)。
应用程序.js
const App = () => {
return (
<div className="container">
<Router>
<List path="/" />
<Details path="/details/:sub" />
</Router>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
List.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;
解决方案
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);
要记住的一件事是,如果用户直接导航到页面,则不会有任何状态,因此您仍然需要一些机制来在数据不存在时加载数据。
推荐阅读
- python - python, kivy, geopy, buildozer
- android - 如何在 localMaven() 上成功发布 KMM 库以供 android 项目使用?
- javascript - React - 如何使用 UseEffect 中的 useState 更新对象数组中的特定字段
- python-3.6 - 无法通过在 python 中使用 rpyc 访问客户端功能
- javascript - 获取 http 请求访问的 XML 响应被拒绝
- spring-boot - 我们如何在不运行应用程序的情况下从 Spring Boot API 生成 OpenAPI Yaml 文件(Swagger 文件)?
- python - vscode如何查看某些python包库函数的详细使用信息?(就像 pytorch 中的 sum 函数)?
- java - 如何从 Primefaces 5.3 升级到 10.0
- ruby-on-rails - 覆盖 setter 属性不调用
- python - Python for/while 循环