每次在 React Native 中渲染组件之前获取数据和 setState

Question

在这种情况下，我有一个模态，它显示了来自其 state （一个数组）的一些数据，它的 state 正在像 docsC14A 建议的那样在 componentDidMount() ZC1C425268E68385D1AB5074C17 中设置。 每次打开模式时我都需要显示更新的数据。所以我可以使用 componentWillReceiveProps(nextProps) function 来做到这一点，如下所示。
但是如果我想迁移到 getDerivedStateFromProps function 怎么办？ 我将如何实现与它相同的行为？

下面是简化的组件代码：

export class PastOrdersModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      past: {},
      isLoading: false,
      modalVisible: false
    };
  }

  async componentWillReceiveProps(nextProps) {  
    const response = await this.fetchPast();
    this.setState({ past: response });
  }

  async componentDidMount() {
    const response = await this.fetchPast();
    this.setState({ past: response });
  }
   ...
   ... some callback functions for handling modalvisible value ....
   ...
   render(){
   // here rendering state array with this.state.past.map(......) etc.
  }

fetchPast function 向我的服务器发出 GET 请求，您只需要知道它返回一个数组给我。 这是完美的工作。 ComponentWillReceiveProps 每次都会被调用，因为父组件每次都会发送 modalVisible 道具。
但是 componentWillRecieveProps 已弃用，我无法使用 getDerivedStateFromProps 做出相同的行为。我应该如何用它实现相同的功能。

注意：我不会使用 redux，我不会使用 mobx，我知道如何使用它们，这不是我想要的。 问题是我想要的行为太简单了我不想将值传递给另一个组件，我不想将值传递给另一个屏幕，我只想更新一个简单的组件，除了框架正在推动它限制使最简单的任务变得最困难，或者我错过了非常重要的一点。（可能是后一个:)）

注意：我知道我没有对 nextProps 做任何事情，这是我找到的唯一解决方案。

Answer 1

您可以将组件编写为 function 以便您可以使用React Hooks

const PastOrdersModal = (props) => {
  const [past, setPast] = useState({});
  const [isLoading, setLoading] = useState(false);
  const [modalVisible, setModalVisibility] = useState(false);

  useEffect(() => {
    const fetchPast = async () => {
      const response = await fetchPast();
      setPast(response);
    };
    if(modalVisible) fetchPast();
  }, [modalVisible])

  useEffect(() => {
    const fetchPast = async () => {
      const response = await fetchPast();
      setPast(response);
    };
    fetchPast();
  }, [])

   ...
   ... some callback functions for handling modalvisible value ....
   ...
   return <YourComponent />

我们在顶部[]中创建的变量是我们用于 state 的变量。 第一个将是 state 本身，第二个是负责更新 state 的 function。 useEffect挂钩将模拟 Class 组件的生命周期方法，它接收将执行的回调和第二个参数。 第二个参数将指示何时触发。 例如，您可以看到 2 个useEffect ，带有空数组的那个将告诉钩子只执行一次，类似于componentDidMount 。 另一个将在modalVisible更改时触发，因此每次更改其值时都会执行，这就是为什么我们仅验证模态是否可见（为true ）我们进行获取，否则将不会执行获取