我在用next.js &redux搭建一个web应用，想在刷新或访问页面时直接输入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)
0
投票
投票
根据每当应用程序被刷新时哪个组件在挂载，你必须确保不管是什么动作在获取数据，都在componentDidMount中被调用。例如，看看下面我的App.js，我在其中调用了componentDidMount。
class App extends React.Component {
componentDidMount = () => {
this.props.persistUser()
this.props.fetchAndSetAllPosts()
console.log('refreshed')
}
}
我从Actions文件夹中导入了fetch函数 "this.props.fetchAndSetAllPosts()"，这是一个从API中获取数据的动作。每次刷新页面时，组件都会挂载，因此，应该执行你在componentDidMount中调用的任何内容。 console.log()一个消息，以确定它是正确触发的。如果这有帮助，请告诉我! 祝您好运
