Question

我正在尝试让url参数来确定要加载哪个“文章”。

但是，mapStateToProps首先触发，并且导致文章数据未定义。因此，在componentDidMount可以触发之前会引发一条错误消息（这是将商品数据加载到状态中的假设）。我曾尝试将调度程序放在其他地方（例如在render或它自己的方法中），仍然是同样的问题。

这是我的commonentDidMount：

componentDidMount(){
     const params = this.props.location.search.split('/');
     this.props.dispatch(getArticleStats({articleId:params[4]}));

这是我的mapStateToProps：

    const mapStateToProps=(state)=>{
    return {
        user:    state.user,
        article: state.article
    }
}

我收到的错误显示state.article中的数据是未定义的，因为调度尚未触发：

TypeError: Cannot read property 'articleTitle' of undefined

任何智慧或指导都会受到赞赏。

Answer 1

在mapStateToProps调用后无法触发dispatch。 mapStateToProps是connect的自变量，connect是高阶组件（HOC）。从本质上讲，这使您的组件成为dispatch函数的子元素。

解决问题的方法很可能不是重新排序article的调用，而是要处理if (this.props.article) ...仍不确定的情况。一个简单的伪造支票很可能会完成这项工作：name: CI on: [push] jobs: phpunit: runs-on: ubuntu-latest defaults: run: working-directory: ./app steps: - uses: actions/checkout@v1 - name: Setup Symfony run: .env.dev .env - name: Install Composer Dependencies run: composer install --prefer-dist - name: Run Tests run: php bin/phpunit

Answer 2

“首次安装组件时，数据未定义”是React中很常见的问题。

尝试渲染任何涉及异步数据的内容之前，先在渲染方法中添加保护措施：

render() {
  return (
    {this.state.article &&
      <h1>{this.state.article.articleTitle}</h1>
      <div>{this.state.article.articleBody}</div>
    }
  )
}

在componentDidMount中分派之前会触发mapStateToProps，导致数据未定义

2 个答案: