在反应中调用外部 componentDidMount()

Question

我有一个要求，一旦页面加载完毕，我的 dropdownlist 就应该被填充。为此，我将该代码放在 componentDidMount().

中

  componentDidMount() {
    axios.get(`http://localhost:8080/country_code`).then((res) => {
      const countryData = res.data;
      this.setState({ countryData });
      alert(countryData);
    });
  }

我有一个用户输入字段，人们可以在其中输入值并将其保存到数据库中。我希望一旦用户将该值保存到数据库中，我的下拉列表应该得到刷新并且该值应该在下拉列表中可见。如何对外调用componentDidMount()？有没有更好的处理方法？

截至目前，仅当用户刷新页面时列表才会刷新。

Answer 1

您不能从外部调用 componentDidMount，但您可以将 componentDidMount 中的代码提取到一个方法中，并可以在 componentDidMount 和 onSave 中调用它。

 alertDropDown = () => {
    axios.get(`http://localhost:8080/country_code`).then((res) => {
          const countryData = res.data;
          this.setState({ countryData });
          alert(countryData);
        });
    }

componentDidMount

componentDidMount() {
  this.alertDropDown()
}

数据库保存方法

onSave = () => {
 this.alertDropDown()
}

Answer 2

您不能从外部调用 componentDidMount() 方法！。所以你需要设置在 componentDidMount() 和 onChange 下拉值中调用的公共函数。看下面的代码！

class App extends Component {
  componentDidMount() {
    this.handleCallApi();
  }

  handleCallApi = () => {
    axios.get(`http://localhost:8080/country_code`).then((res) => {
      const countryData = res.data;
      this.setState({ countryData });
      alert(countryData);
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleCallApi}>Call Api</button>
      </div>
    );
  }
}
export default App;

Answer 3

您不能调用 componentDidMount()，因为它是一个生命周期方法，在初始渲染时调用。您可以公开一个函数并从 componentDidMount() 内部调用该函数，例如：

updateDropdownData = () => {
 axios.get(`http://localhost:8080/country_code`).then((res) => {
      const countryData = res.data;
      this.setState({ countryData });
      alert(countryData);
    });
}

componentDidMount() {
  this.updateDropdownData()
}

并且您可以从任何地方调用 this.updateDropdownData()。就像：

onSomeUserAction = () => {
 this.updateDropdownData()
}

在反应中调用外部 componentDidMount()

calling externally componentDidMount() in react

javascript

reactjs

react-native

react-redux