Question

我需要将值index从父级传递给子级。父母和孩子都需要具有修改index的功能。当父母修改index时，孩子无法获得更新。有什么我能解决的吗？

父类：

constructor(props) {
    super(props);
    this.state = {
        index: 0
    }
}
        parentFunction(dir) {
            this.setState({
                index: 10
            });
        }
    render() {
      return(
         <Child index={this.state.index}/>
    );}

子类：

constructor(props) {
        super(props);
        this.state = {
            index: this.props.index
        };
    }
childFunction(dir) {
    this.setState({
        index: this.props.index+1     
    });
}
render() {
  return(
     <div>{this.state.index}</div>
);}

Answer 1

如果您阅读有关反应react life cycle生命周期的文章，那么您将理解为什么，您将值从父项传递给子项，但您没有告诉反应它应该更新，添加像beblow的代码：

＆＃13;

//add this life cycle in the child component

  componentWillReceiveProps(newProps) {
        if (newProps.index!== this.props.index) {
            this.setState({
              index:newProps.index
            })
        }
    }

＆＃13;

Answer 2

你有（至少）2个选项。

执行此操作的最佳方法是传递更改的父函数通过道具给孩子的索引。然后你可以调用该函数儿童班，它将改变父母的状态。在渲染中子类的方法只使用来自props的索引而不是当地的孩子状态。
执行此操作的不好方法是在child的render方法中调用设置状态，设置索引的状态等于该值传递道具。

Answer 3

您不需要在类中保留更新程序功能。您可以将updater函数从parent向下传递给child，让父对象处理状态更新。在构造函数中设置基于props的状态也是一种反模式。您应该直接使用儿童道具作为您的用例。如果您需要从道具更新子状态，请务必在>>> def vector(x, y, z): ... print("vector: x=%f, y=%f, z=%f" % (x, y, z)) ... >>> vector(1, 2, 3) vector: x=1.000000, y=2.000000, z=3.000000 >>> v = [1, 2, 3] >>> vector(*v) vector: x=1.000000, y=2.000000, z=3.000000中执行此操作，因为componentWillReceiveProps仅在第一次调用，constructor在每个父级调用时调用componentWillReceiveProps -render

componentWillReceiveProps(newProps) {
        if (newProps.index!== this.props.index) {
            this.setState({
              index:newProps.index
            })
        }
    }

然而你需要的是

父类：

constructor(props) {
    super(props);
    this.state = {
        index: 0
    }
}
        parentFunction(dir) {
            this.setState({
                index: 10
            });
        }
     updaterFunction(dir) {
        this.setState((prevState) => ({
           index: prevState.index+1     
        }));
    }
    render() {
      return(
         <Child updaterFunction={(val) => this.updaterFunction(val)} index={this.state.index}/>
    );}

子类：

updateProps = () => {
    this.props.updaterFunction();
}
render() {
  return(
     <div>{this.props.index}</div>
);}

React：从父级到子级传递值不起作用

3 个答案: