Question

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

但是，当我在渲染开始时打印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
    }}

Answer 1

您在做React错误。如果可以在道具中访问该值，则该值应保留在道具中。在道具和状态之间复制数据会导致无用的组件重新渲染，最重要的是会导致许多错误，尤其是在插入像React-Redux这样的库时，它们会大量操纵道具。

哦，在构造函数中使用props，而不是this.props。

Answer 2

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

鉴于构造函数在组件生命周期中的第一次渲染之前执行，则可能在构造函数执行期间props.userListIds为空，而在render处，它已被检索并可以使用。如果您确实要以本地状态存储userListIds，则可以使用getDerivedStateFromProps更新本地状态：

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

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

国家无法使用道具

2 个答案: