我正在使用next.js&redux,并尝试在刷新或访问页面时通过直接键入url地址来获取数据。
我在getInitialProps中放入了一个"getItems"操作,以便在刷新页面时自动触发它,但它永远不会起作用。
如果我在页面刷新后手动单击"getItems"操作按钮,它会从DB加载数据,所以我想操作函数工作得很好。
但是,刷新页面时如何自动获取数据?
import Head from 'next/head'
import Link from 'next/link'
import { connect } from 'react-redux'
import { getItems } from '../../store/actions/itemAction'
const Index = props => {
return (
<>
<Head>
<title>Item List</title>
</Head>
<div>
<Button onClick={() => props.getItems()}>Get Items!</Button>
</div>
</>
)
}
Index.getInitialProps = async ({ store }) => {
await store.dispatch(getItems())
return {}
}
const mapStateToProps = state => ({
goods: state.item.goods,
})
const mapDispatchToProps = dispatch => ({
getItems: () => dispatch(getItems())
})
export default connect(mapStateToProps, mapDispatchToProps)(Index)
根据刷新应用程序时要装载的组件,您必须确保在组件DidMount中调用任何获取数据的操作。例如,看看下面的App.js,我在其中调用组件DidMount:
class App extends React.Component {
componentDidMount = () => {
this.props.persistUser()
this.props.fetchAndSetAllPosts()
console.log('refreshed')
}
}
我从操作文件夹"this.props.fetchAndSetAllPosts(("中导入了fetch函数,这是一个从API获取的操作。因此,每次刷新页面时,组件挂载都应该执行您在componentDidMount中调用的任何内容。console.log((发送一条消息以确保其正确触发。如果这有帮助,请告诉我!祝你好运!