Блог

Я пытаюсь создать приложение, основанное на react, которое использует aws api gateway / lambda и dynamodb в качестве серверной части. У меня есть flatlist, который я заполняю, выполняя вызов для извлечения всех элементов из базы данных. У меня есть хук эффекта, который я использую для извлечения данных при монтировании компонента. Как мне запустить тот же эффект, когда / если мой запрос post выполнен успешно?

Это мой эффект, который я запускаю только один раз, как компонент монтировался.

 useEffect(() => {
    const fetchData = async () => {
      const resp = await fetch('MY_AWS_URL')
      const data = await resp.json()
      const exp = data.Items 
      setExp(exp);   //SET THE STATE VARIABLE WITH THE DATA
      setLoading(false); //STOP DISPLAYING DEFAULT SPINNER AND SHOW DATA
    }
    fetchData();

  }, []);   

  

У меня есть форма, которая позволит мне публиковать новые данные в базе данных. Как мне автоматически обновить свой компонент для отображения последних данных, если мой запрос POST выполнен успешно?

попробуйте перевести список в состояние, и после того, как вы вызовете post-запрос, обновите состояние (список элементов) самым новым элементом, чтобы react обновил ваш компонент я привожу вам здесь пример с библиотекой axios, если вы не работаете с ней, это не проблема, просто обновите список после успешного выполнения вашего post-запроса

 class yourClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],//list contain the same data in your database
    };
  }
  const update = () =>{
  axios().post().then(setState({list:nextlisteWithTheNewItem})).catch()
  }

  render() {
  
  }  

Если вы используете react-navigation, ваш componentDidMount (useEffect) сработает только один раз, потому что компонент не размонтирован. Итак, я думаю, что вы перенаправляете со своего экрана CreateItem на экран showItems, поэтому вам следует использовать focus listener и вызывать свой серверный сервер, когда ваш экран сфокусирован (в основном это означает, когда вы находитесь на этом экране)

 import * as React from 'react';
import { View } from 'react-native';

function ItemScreen({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // The screen is focused
      // Call any action
    const fetchData = async () => {
      const resp = await fetch('MY_AWS_URL')
      const data = await resp.json()
      const exp = data.Items 
      setExp(exp);   //SET THE STATE VARIABLE WITH THE DATA
      setLoading(false); //STOP DISPLAYING DEFAULT SPINNER AND SHOW DATA
    }
    fetchData();
    });

    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);

  return <View />;
}