Tengo un requisito en el que una vez que se carga la página, se debe completar mi dropdownlist . para eso puse ese código en componentDidMount() .
componentDidMount() { axios.get(`http://localhost:8080/country_code`).then((res) => { const countryData = res.data; this.setState({ countryData }); alert(countryData); }); } Tengo un campo de entrada de usuario en el que la persona ingresa el valor y lo guarda en la base de datos. Quiero que una vez que el usuario guarde ese valor en la base de datos, mi menú desplegable debería actualizarse y ese valor debería estar visible en el menú desplegable. ¿Cómo puedo llamar externamente a componentDidMount() ? ¿Hay alguna manera mejor de manejar lo mismo?
A partir de ahora, la lista se actualiza solo cuando el usuario actualiza la página.
No puede llamar a componentDidMount externamente, pero puede extraer el código en componentDidMount a un método y puede llamarlo tanto en componentDidMount como en onSave .
alertDropDown = () => { axios.get(`http://localhost:8080/country_code`).then((res) => { const countryData = res.data; this.setState({ countryData }); alert(countryData); }); }componenteDidMount
componentDidMount() { this.alertDropDown() }En el método de guardado de base de datos
onSave = () => { this.alertDropDown() }¡No puede llamar externamente al método componentDidMount() !. por lo que necesita establecer una función común que es llamar en componentDidMount() y el valor desplegable onChange. ¡Vea el código a continuación!
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;No puede llamar al componenteDidMount() , ya que es un método de ciclo de vida y se llama en el renderizado inicial. Puede exponer una función y llamar a esa función desde el componenteDidMount() algo así como:
updateDropdownData = () => { axios.get(`http://localhost:8080/country_code`).then((res) => { const countryData = res.data; this.setState({ countryData }); alert(countryData); }); } componentDidMount() { this.updateDropdownData() }Y puede llamar a this.updateDropdownData() desde cualquier lugar que desee. Al igual que:
onSomeUserAction = () => { this.updateDropdownData() }