React页面跳转时this.props.CategoriesList未定义问题求助

兄弟，你这个问题太典型了！通过跳转按钮进入组件页面时this.props.CategoriesList是undefined，刷新就正常，本质就是组件先渲染了，但数据请求还没走完——跳转时父组件/路由层面的异步数据还没返回，子组件自然拿不到值。下面给你几个实用的解决思路，直接套到代码里就能用：

方案1：组件内加加载状态判断（最快上手） #

你已经加了this.props.CategoriesList && ...的判断，但可以优化成更友好的加载提示，避免页面空着：

修改你的组件render方法：

render() {
  const $Sender = $formConfig['$Sender'];
  
  // 如果CategoriesList还没加载好，先显示加载状态
  if (!this.props.CategoriesList || this.props.CategoriesList.length === 0) {
    return <div>加载中...</div>; // 换成你们项目的Loading组件会更专业
  }

  return( 
    <Column col={'12'} className="my-4">
      <Row>
        <Column col="12">
          <Row>
            <Column col={'md-12'}>
              <Column col={'12'} className="mb-2" style={{padding: 20, border: '1px dotted #f5f5f5'}}>
                <Row>
                  { $Sender.map((field, i) => {
                    return(
                      <Column key={`$Sender_${i}`} col={field.col} m="b-3">
                        <Field {...field} component={this.props.preview ? Fields.ReadOnly : field.component} />
                      </Column>
                    )
                  }) }
                  {/* 这里不用再判断了，上面已经确保数据存在 */}
                  <DataLinesAssociazioni CategoriesList={this.props.CategoriesList} formName={$formConfig.FORM_NAME} />
                </Row>
              </Column>
            </Column>
          </Row>
        </Column>
      </Row>
    </Column>
  )
}

这个方案不用改其他地方，直接在当前组件里处理，用户体验也不会拉胯。

方案2：父组件先加载数据再跳转（从根源解决） #

既然跳转时数据没准备好，那我们就先把数据拿到手再跳！修改父组件的跳转按钮逻辑：

_renderBtns(C) {
  const handleEditClick = async () => {
    // 先调用获取CategoriesList的接口方法，等数据返回
    await this.props.fetchCategoriesList();
    // 数据加载完成后再跳转到编辑页
    this.props.history.push(`${RoutesIT.products_edit}/${this.props.current._id}`);
  }

  return(
    <Row_DropDown id={C.Code}>
      <React.Fragment>
        <li>
          {/* 把原来的A标签换成按钮，用点击事件控制跳转时机 */}
          <button className="btn btn-link btn-sm mb-3" onClick={handleEditClick}>
            {'Edit'}
          </button>
        </li>
      </React.Fragment>
    </Row_DropDown>
  )
}

这样目标组件加载时，CategoriesList已经在props里了，根本不会出现undefined的情况。

方案3：用类组件生命周期监听Props变化 #

如果你的组件是类组件，可以通过生命周期钩子监听CategoriesList的变化，等数据到位了再渲染：

constructor(props){
  super(props);
  this.state = {
    isCategoriesReady: false
  }
}

componentDidUpdate(prevProps) {
  // 当CategoriesList从无到有，更新状态触发重新渲染
  if (!prevProps.CategoriesList && this.props.CategoriesList?.length > 0) {
    this.setState({ isCategoriesReady: true });
  }
}

render() {
  const $Sender = $formConfig['$Sender'];
  const { isCategoriesReady } = this.state;

  if (!isCategoriesReady) {
    return <div>加载中...</div>;
  }

  return( 
    {/* 原有的渲染内容 */}
  )
}

额外小提醒 #

还要确认一下：父组件或者状态管理（比如Redux）里，CategoriesList的请求是不是在组件挂载时触发的？如果是用React Router的话，也可以试试路由预加载（比如loadData方法），确保数据先加载完成再渲染组件。

内容的提问来源于stack exchange，提问作者Jack23