场景:在使用next.js 的时候,我们点击Link切换,根据路由的id来渲染不同的列表的时候,发现接口正常,页面没变化
如图,点击 视频类型 和文字类型,路由会从http://localhost:3000/list?id=1
切换成http://localhost:3000/list?id=2
,我们根据路由id值从egg-mysql拿到不同的数据。
数据在控制台打印,有变化,但是页面没有反应,此时的解决方法可以使用 react Hooks
中的 ustEffect
解决:
export default function ArticleList(props) {
//props可以换其他的单词,接收 getInitialProps 返回来的对象
// 主要代码部分start
> const [ list , setlist ] = useState(props.data)
> useEffect(()=>{
> setlist(props.data) })
// 主要代码部分end
//下面中间取值 渲染可忽略
return (
<div>
<Header/>
<Row className="comm-main" type="flex" justify="center">
<Col className="comm-left" xs={
24