Question

我在加载页面时收到“未捕获的TypeError：无法在控制台中读取属性'数据'的错误”错误。在构造函数中，我使用redux-promise为axios调用外部api数据，然后将props传递给无状态组件（TranslationDetailBox）。数据到达，子组件将很快收到道具（页面看起来没问题），但首先出现错误消息。

在api调用之前，

this.props.translation为空，并且在使用外部数据更新状态之前进行渲染。我相信这是问题，但我不知道如何解决它。

class TranslationDetail extends Component {
  constructor(props){
    super(props);

    this.props.fetchTrans(this.props.params.id);
      }

  render() {
    return (
      <div className="container">
        <TranslationDetailBox text={this.props.translation.data.tech}/>
        <TranslationDetailBox text={this.props.translation.data.en}/>
      </div>
    );
  }
}

function mapState(state) {
  const { translation } = state;

  return { translation };
}
...

Answer 1

我发现这是条件渲染的一个很好的用例。

您的渲染可以检查数据是否已加载，如果没有，则渲染一些表明它仍在加载的内容。

一个简单的实现可能是：

<h1 id="message" />

Answer 2

您可以设置defaultProps：

TranslationDetail.defaultProps = {
    translation: { 
        data: {}
    }
};

React-Redux - 在异步数据到达之前传递道具

2 个答案: