Estoy usando mockapi.io para practicar con la llamada a la API de Axios
Después de realizar una solicitud POST, que crea nuevos datos, quiero renderizar FlatList con los datos actualizados. Estoy pensando en hacer una nueva solicitud GET para hacer eso, pero no lo logré.
necesito ayuda
Aquí es donde llamo a la solicitud GET, que ya tiene datos simulados, y uso FlatList para verlos
ListScreen.js
class ListScreen extends Component { constructor(props) { super(props); this.state = { data: [], } } componentDidMount() { axios.get('insert url') .then(res => { this.setState({ data: res && res.data ? res.data : [] }) }) .catch(err => { console.log('Run into problem') }) } render() { const { data } = this.state; return ( <View> <FlatList data={data} renderItem={({ item }) => { return ( <Item name={item.lastName} phone={item.phoneNumber} /> ); }} keyExtractor={(item) => item.id} /> </View>Y aquí es donde llamo solicitud POST
class Create extends Component { handleSubmitData = (value) => { console.log('check value: ', value) axios.post('insert url', { lastName: `${value.Name}`, phoneNumber: `${value.Phone}`, }) .then((response) => { console.log('here is what you upload: ', response.data) }) .catch((err) => { console.log('Run into problem') }) } render() { return ( <CreateForm handleSubmitData={this.handleSubmitData} /> ) } }El componente CreateForm se parece a esto
class CreateForm extends Component { render() { const { handleSubmit } = this.props; return ( <View> <View> <Field name="Name" component={} /> <Field name="Phone" component={} /> </View> <View> <Button title='Save' onPress={handleSubmit(this.props.handleSubmitData)} /> </View> </View> )Esto se puede hacer elevando el estado, de ListScreen al padre de ListScreen.
En ListScreen, elimine el estado y muévase a su padre:
this.state = { data: [], }Pase el estado a ListScreen como accesorio, también pase la función de búsqueda (ver más abajo):
<ListScreen data={this.state.data} fetchListData={this.fetchListData} />Cambie la función de representación de ListScreen para acceder a los datos de los accesorios:
const { data } = this.props; Mueva el axios.get() fuera de ListScreen y dentro de un método en el componente principal.
class App extends Component { fetchListData() { axios.get('insert url') .then(res => { this.setState({ data: res && res.data ? res.data : [] }) }) .catch(err => { console.log('Run into problem') }) } }En ListScreen, llame a la función en componentDidMount:
componentDidMount() { this.props.fetchListData(); }Alternativamente, puede llamarlo en el
componentDidMount()del componente principal. Esto podría ser preferible si renderiza múltiples ListScreen, por ejemplo.
Finalmente, en el componente Create, pase la función fetch:
<Create fetchListData={this.fetchListData} />Llámelo en la creación exitosa:
.then((response) => { this.props.fetchListData(); console.log('here is what you upload: ', response.data) })Como veo en su código, cuando realiza una solicitud POST, no mostrará datos actualizados en su pantalla porque no hay una devolución de llamada de solicitud GET sobre el resultado exitoso.
Sugiriendo que no está usando redux , en ListScreen.js podría envolver la solicitud GET en una función y llamarla en componentDidMount() . Debería verse como:
const getData () => { axios.get('insert url') .then(res => { this.setState({ data: res && res.data ? res.data : [] }) }) .catch(err => { console.log('Run into problem') }) } componentDidMount() { this.getData() }Por lo tanto, debe pasar o profundizar la función de solicitud GET en su componente secundario como accesorio y usarla en una devolución de llamada de solicitud POST. El método de solicitud POST final debería verse así:
handleSubmitData = (value) => { console.log('check value: ', value) axios.post('insert url', { lastName: `${value.Name}`, phoneNumber: `${value.Phone}`, }) .then((response) => { console.log('here is what you upload: ', response.data) getData() }) .catch((err) => { console.log('Run into problem') }) }Como puede ver, una vez finalizada su solicitud POST, se activará una solicitud GET para actualizar su estado principal, lo que dará como resultado una pantalla con datos actualizados. Sin embargo, debe asegurarse de pasar sus parámetros correctamente en función de cómo es la estructura de su componente.