异步更新后将道具传递给子组件

问题描述

异步操作后更新的 props 必须传递给 Inputs 组件.异步操作完成后如何将props传递给子组件.

The updated props after async operation has to be passed to Inputs component. How to pass the props to child component after the async operation is completed.

我正在尝试在 Child 组件中不连接.这可能吗

I'm trying without connect in the Child component. Is this possible

class SignUp extends Component {
  componentDidMount(){
   this.props.UserSignupType();
  }
  render(){
    <Inputs {...this.props} >
  }
}

const stateToProps = state => ({
  signupInputs: state.signupInputs
});

connect(stateToProps, null)(SignUp);

class Inputs extends Component {
  constructor(props){
    super(props);
    this.state = {...props};
  }
  render(){
    if(!this.state.isLoaded) {
      return <Loading />
    } else {
      let inputs = [];
      this.state.inputs.forEach(function(input){
        inputs.push(<TextField value={input.text}>)
      });
      return <View>{inputs}</View>
    }
  }
}

@Adam 回答后更新:

Update after @Adam answer:

注意:我已经尝试过 this.state.isLoaded 和 this.props.isLoaded.使用这两种方法我都无法获取数据

Note: I have tried with this.state.isLoaded and this.props.isLoaded. Using both approach i'm unable to get the data

更新 2:

class SignUp extends Component {
  constructor(props){
    super(props);
    this.state = {...props};
  }

  componentDidMount(){
   this.props.UserSignupType();
  }
  render(){
    <Inputs {...this.state} >
  }
}

const stateToProps = state => ({
  signupInputs: state.signupInputs
});

connect(stateToProps, null)(SignUp);

class Inputs extends Component {
  constructor(props){
    super(props);
    this.state = {...props};
  }
  render(){
    if(!this.state.isLoaded) {
      return <Loading />
    } else {
      let inputs = [];
      this.state.inputs.forEach(function(input){
        inputs.push(<TextField value={input.text}>)
      });
      return <View>{inputs}</View>
    }
  }
}

推荐答案

您走对了.

您不需要将您的子组件连接到 redux 存储.您正在将您的道具传递给孩子，但您的问题是在您孩子的构造函数中，您将这些道具放入状态然后丢弃它们.因此，对父级道具的任何后续更改都不会传播到子级.

You don't need to connect your child component to the redux store. You are passing your props down to the child, but your problem is that in the constructor of your child you are putting these props into the state and then discarding them. Thus any subsequent changes to the props of the parent will not propagate to the child.

在您的孩子中，您应该使用 if(!this.props.isLoaded) 而不是 if(!this.state.isLoaded).这应该可以解决您的问题.

In your child you should be doing if(!this.props.isLoaded) instead of if(!this.state.isLoaded). This should solve your problem.

这篇关于异步更新后将道具传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！