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() }