Question

我正在使用react和redux来构建我正在构建的Web应用程序。

在大多数情况下，每件事情都运作得很好，但是在从父母那里传递道具时我有一个主要问题。

我有一个主要组件连接到redux并获得我的商店。我把道具传递得很好：

{ this.props.children && React.cloneElement(
  this.props.children, 
    { 
      preset: this.state.preset,
      children: this.state.babies,
      child: this.state.currentChild,
      name: this.state.firstName,
    }
)}

所以我的特定页面获得了这个道具。然后我将所需的道具传递给子组件，但是我无法访问mount上的道具或者反应提供的任何其他生命周期方法。他们似乎唯一可用的地方是在render方法中，那就是在运行未定义的检查之后：

let child = this.props.child;

if(child.birthdate != undefined) {
  // do stuff here
}

看起来我收到两次未定义，然后道具最终进来，我能够与他们合作。

我的问题是我应该访问哪些生命周期组件来格式化我的数据。我已经在文档中运行了所有可用的方法来尝试console.log，看看我在哪里，但它们都返回空。我实际上在渲染中获得道具的唯一地方。

我知道我的解释很差，但任何帮助都会受到赞赏。

-E

Answer 1

componentWillReceiveProps生命周期方法应该做一个技巧。你可以得到一个传入的道具并在那里格式化。之后，您可以在组件状态中设置格式化数据，并在您的渲染方法中使用它，就像这样。

componentWillReceiveProps(nextProps) {
  this.setState({
    formattedBirthdate: nextProps.child.birthdate
  });
}

第二个选项是在构造函数中执行相同的操作。

之后，您可以在render中输出formattedBirthdate，如下所示：

this.state.formattedBirthdate && <div>{this.state.formattedBirthdate}</div>

React Redux Lifecycle Props

1 个答案: