当用户点击链接时,React Router将显示一个组件。该组件将显示的数据来自和端点,因此我想知道什么是最佳做法。
我创建了一个名为fetchData
的函数,使用fetch
在端点中执行GET,然后返回一个promise。一旦这个承诺得到解决,我想发送一个Redux动作来更新状态。
我设法用redux-thunk
执行此操作,但我希望在不添加更多库的情况下实现此功能。
我试图关注'容器/演示文稿'想法和我在React中使用无状态功能组件。
总的来说,这就是我正在做的事情:
index.js
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
app.js
const App = () => (
<div>
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/data-list" component={DataListContainer} />
</Switch>
</div>
</BrowserRouter>
</div>
)
dataListContainer.js
const mapStateToProps = (state) => {
return { data: state.data }
}
const mapDispatchToProps = (dispatch) => {
return { }
}
const DataListContainer = connect(
mapStateToProps,
mapDispatchToProps
)(DataList)
dataList.js
const DataList = (props) => {
const rows = props.data.map(data => {
return <Data data={data} />
})
return (
<div>
{rows}
</div>
)
}
Data
组件只显示数据。我想知道我应该在哪里添加对函数fetchData
的调用以及我应该在哪里解决返回的promise。我想在承诺解决后我需要发出一个动作,但不知道最好的地方在哪里。
其他问题是:我想只提取一次de数据,我的意思是,仅当用户点击/data-list
链接时。如果它返回主页然后再次转到data-list
,我不想再次调用端点。在React Route实现中隐藏了一次调用功能吗?
答案 0 :(得分:2)
将dataListContainer.js
更改为有状态的React组件,这没关系,因为它是容器!不要将代码用于准确,只是为了给出一个想法。
import { fetchData, DataList, store } '......'
class DataListContainer extends React.Component {
componentDidMount() {
if (!this.props.data) {
store.dispatch(fetchData())
}
}
render() {
return (<DataList data={this.props.data}/>);
}
}
const mapStateToProps = (state) => {
return { data: state.data }
}
export default connect(
mapStateToProps
)(DataListContainer)
答案 1 :(得分:-1)
我认为这在路线和观点中是不可能的。使用React Router切换页面时,组件将卸载。组件的所有数据也被清除。 (相信我,这是你想要的。否则你可能会遇到一些让你的浏览器崩溃的系列内存问题)。此外,您的视图仅负责显示内容,不应对其收到的数据执行任何操作。
在您的商店中查看一些实施方案。例如,将来自API的接收数据存储在商店对象中。下次有人在商店中调用fetchData
函数时,请提供存储的数据,而不是发出新请求。商店永远不会卸载,因此它可以将数据保存在内存中。请记住,如果重新加载整个页面,用户将只收到新数据。这样一个难以刷新的&#39;但可能有用......
您可以做的另一件事就是问自己为什么不想多次呼叫该端点?数据集是否设置为大?在这种情况下,使用分页并将其分段服务。