从其他组件调用带有 setState 的函数答案

【问题标题】：Call function with setState from other component从其他组件调用带有 setState 的函数
【发布时间】：2020-01-02 21:58:27
【问题描述】：

我有以下设置：

import {getNewImage} from '...'

export default class FirstClass extends Component {
    constructor() {
        super();
        this.state = {
            imageURL: 'www.test.com/new.jpg',
        }
    }

    update = () => {
         this.setState({
             imageURL: 'www.test.com/updated.jpg',
         })
    }

    render() {
        return (
            <View>
                <Image
                    source={{ uri: this.state.imageURL }}
                />
            </View>
        );
    }
}

import Class1 from '...'

export default class SecondClass extends Component {
    render() {
        return (
            <TouchableOpacity onPress={() => new FirstClass().update()}>
                <Class1></Class1>
            </TouchableOpacity>
        );
    }
}

问题是：它不会更新 imageURL。我尝试了多种方法。在更新中记录此内容会返回正确的对象。但是尝试记录this.setState() 会返回未定义。

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案1】：

我想Class1 是指FirstClass。

您应该使用 ref 的组件引用，而不是创建 FirstClass 类的新实例

查看此代码

export default class SecondClass extends Component {
    private firstClass = null;

    render() {
        return (
            <TouchableOpacity onPress={() => this.firstClass.update()}>
                <Class1 ref={ref => this.firstClass = ref} />
            </TouchableOpacity>
        );
    }
}

【讨论】：

你是我的英雄！

【解决方案2】：

您可以尝试更新Class1 中的状态，类似于the react reference 中的您想要的状态。

但在我看来，这不是从父级更改子组件状态的好案例和可预测的行为。

作为另一个选项，您可以向SecondClass 添加其他状态，并通过道具将其传递给子组件。在 getDerivedStateFromProps 中的 Class1 中基于该道具更改状态。


export default class FirstClass extends Component {
  constructor() {
    super();
    this.state = {
      isNeedToUdpate: false,
      imageURL: "www.test.com/new.jpg"
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.isNeedToUdpate !== state.isNeedToUdpate) {
      return {
        isNeedToUdpate: props.isNeedToUdpate,
        imageURL: "www.test.com/updated.jpg"
      };
    }

    return null;
  }

  render() {
    return (
      <View>
        <Image source={{ uri: this.state.imageURL }} />
      </View>
    );
  }
}

export default class SecondClass extends Component {
  constructor() {
    super();
    this.state = {
      isNeedToUpdateClass1: false
    };
  }

  render() {
    return (
      <TouchableOpacity
        onPress={() => {
          this.setState({ isNeedToUpdateClass1: true });
        }}
      >
        <Class1 isNeedToUpdate={this.state.isNeedToUpdateClass1}></Class1>
      </TouchableOpacity>
    );
  }
}

【讨论】：