时间戳

首页 > 解决方案 > 状态无法访问道具

javascript - 状态无法访问道具

问题描述

我正在尝试通过使用from props添加selectedUserIds状态构造函数。userListIds但是，似乎在执行构造函数时，道具中的值尚未设置，因此我得到空值。

但是，当我this.props.userListIds在渲染开始时打印时，它显示得很好。问题出在其他地方。解决方案可能是什么？这是代码：

 const mapStateToProps = (state: State, props: OwnProps): PropsFromState => ({
      userList: getCompanyTeamListSelector(state),
      userListIds: state.ddls.companyUsers.map(element => Number(element.id))
    });


@connect(mapStateToProps)
export default class EmailModal extends React.Component<OwnProps & Partial<PropsFromDispatch> & Partial<PropsFromState>, OwnState> {
  constructor(props: OwnProps) {
    super(props);
    this.state = {
      valueSelected: true, selectedUserIds: this.props.userListIds // HERE
    }}

标签： javascriptreactjs

解决方案

Props 是 React 组件的外部数据资源，因此您应该始终假设 props 数据不可靠，并注意组件中的空/未定义的 props。

给定构造函数是在组件生命周期第一次渲染之前执行的，在构造函数执行过程中，有props.userListIds可能是空的，并且 at render，它被检索并准备好使用。如果你真的想存储userListIds在本地状态，你可以使用getDerivedStateFromProps更新本地状态：

public static getDerivedStateFromProps(nextProps: IProps, prevState: IState) {
  return (nextProps.userListIds != prevState.selectedUserIds) ? 
    { selectedUserIds: nextProps.userListIds } :
    null
}

但与此处的其他评论一样，我也反对将 props 复制到本地状态的想法，因为对于同一条数据，您将有 2 个独立的事实来源，并且每当您的 props 更改时都需要更新本地状态。可以考虑直接props.userListIds改用。

推荐阅读