reactjs - 再次反应 useState 初始化值
问题描述
我正面临一个奇怪的问题。我正在使用 redux 并做出反应。当从 store 获取新道具时,react useState 再次初始化我的数据。文档说 useState 初始值仅在第一次渲染中,但我不明白为什么会这样
function UploadFileInfo({
createdCategory
}){
const [data, setData] = useState({
video_id: null,
title: 'title',
category_id: '2',
channel_category_id: '',
info: '',
tags: [],
playlists: '',
enable_comments: 0,
enable_watermark: false,
banner_id: null,
});
return (
<Paper square className={classes.paper}>
</Paper>
);
const mapStateToProps = createStructuredSelector({
tags: makeSelectTags(),
categories: makeSelectCategories(),
createdTag: makeSelectCreateTag(),
createdCategory: makeSelectCreateCategory(),
createdPlaylist: makeSelectCreatedPlaylist(),
myCategories: makeSelectMyCategories(),
myPlaylists: makeSelectMyPlaylists(),
uploadedFile: makeSelectUploadFile(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
addTag: title => dispatch(createTag(title)),
addCategory: title => dispatch(createCategory(title)),
addPlaylist: title => dispatch(createPlaylist(title)),
publishVideo: data => dispatch(createVideo(data)),
};
}
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default compose(withConnect)(UploadFileInfo);
}
解决方案
您可以使用useEffect
. 它类似于componentDidMount
,componentDidUpdate
反应生命周期。如果某些值发生变化,您可以告诉反应重新渲染页面。您可以在useEffect
函数的 [] 中定义这些值
useEffect(()=>{
setData({
//set data in here
})
},[addTag,addCategory, //values that get changed])
推荐阅读
- swift - Swift:视图在实际设备上自行消失
- flutter - Dart FFI 是如何实现的?它们是像普通函数调用一样便宜,还是在引擎盖下做繁重的工作?
- arrays - 通过结构和函数进行数组排序
- node.js - 将我的 Gatsby 前端部署到 Netlify 后,我的产品特定页面在成功加载后被隐藏
- angular - 如何使用 RxJS 正确链接请求
- express - 跨域Auth0认证
- html - 如果换行符删除分隔符
- enums - 做教程...枚举下拉值设置为与显示相同的文本..不应该将它们呈现为整数
- python - 在 Python 中生成列表列表,但获得相同 ID 的嵌套元素
- python - 如何按循环的顺序更改文件