javascript - React - 新 Prop 传递给子组件后的 Axios/Fetch/Ajax 请求

Question

我有两个组件，App 和 Child。我的目标是 App 将一个 id 向下传递给 Child，当 Child 收到它作为 Prop 时，我希望 Child 执行 Axios/Fetch 请求，然后用结果数据更新自己。我会接受任何为我提供示例 App/Child 源代码的答案，该示例 App/Child 源代码可以完成我的示例或提供我的见解，如果这实际上是可能的，我正在尝试实现。

我是 React 新手。

//应用程序.js

import React, { Component } from 'react';
import Child from './Child.js';
import './App.css';

class App extends Component {

  state = {
    id: 0
  };

  handleClick() {
    this.setState({
      id: this.state.id + 1
    });
  }

  render() {
    return (
      <div>
        <Child id={this.state.id} />
        <div>
          <button onClick={this.handleClick.bind(this)}>Pass new id down to Child component</button>
        </div>
      </div>
    );
  }
}

export default App;

//子.js

import React, { Component } from 'react';
import axios from 'axios';

class Child extends Component {
    state = {
        data: null,
        id: 0
    };

    loadData(q, cb) {
        axios.get('http://localhost:3000/foo?q='+this.state.id)
        .then(result => {            
            // ?
            // this.setState would retrigger update and create an infinite updating loop
        })
        .catch(error => {
            console.log('error: ' + error);
        });
    }

    shouldComponentUpdate(nextProps, prevState) {
        console.log('shouldComponentUpdate: nextProps = ' + JSON.stringify(nextProps) + ', prevState = ' + JSON.stringify(prevState));        

        // ??
    }

    getSnapshotBeforeUpdate(nextProps, prevState) {
        console.log('getSnapshotBeforeUpdate: nextProps = ' + JSON.stringify(nextProps) + ', prevState = ' + JSON.stringify(prevState));

        // ?? 
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps: nextProps = ' + JSON.stringify(nextProps) + ', prevState = ' + JSON.stringify(prevState));
        return {
            id: nextProps.id
        };

        // ?? 
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
    }

  render() {
    return (
      <div>
          <div>data = {this.state.data}</div>
      </div>
    );
  }
}

export default Child;

Answer 1

您应该使用当前 ID 调用 check prev Id 以避免递归更新。你只需要确保你只在你的 props 发生变化时从 props 中获取状态，

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.id !== prevState.id) {
    return {
        id: nextProps.id
    };
 }
 return null;

}

如果您的问题仍然存在，请告诉我