Как я могу использовать React Hooks для обновления sh таблицы при удалении или добавлении строки? - PullRequest
Новая
       28

Как я могу использовать React Hooks для обновления sh таблицы при удалении или добавлении строки?

0 голосов
/ 07 мая 2020

У меня есть компонент таблицы реакций, который отображает некоторые данные игры.

Компонент использует хуки для установки состояния следующим образом: 

const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, []);

Внутри моей таблицы у меня есть кнопка, которая добавляет или удаляет строку с помощью запроса Put в api.

Я хочу, чтобы он удалил строку, не выполняя полное / видимое обновление страницы sh.

Вот фрагмент кода который выполняет запрос ax ios put.

Вы можете видеть, что я снова пытаюсь использовать setData для 'refre sh' данных.

Но это не работает. Теперь он удаляет строку, но я вижу это только после того, как нажму f5 или нажму кнопку sh в браузере. 

const updateGame = async (game, action) => {
    await new Promise(resolve => setTimeout(resolve, 500));

    game.isApproved = action;
    axios({
        method: "PUT",
        url: "api/games/" + game.id,
        data: JSON.stringify(game),
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
    });
    // trying to refresh table after the axios Put request
    setData(data);
};

Есть ли способ обновить состояние sh динамически без необходимости нажмите refre sh?

Спасибо!

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Вы должны сообщить эффекту, когда вы хотите, чтобы он запустился. Пустая скобка в основном аналогична использованию onMount, поэтому при добавлении к ней данных будет обновляться sh при изменении данных. 

const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, [data]);
1 голос
/ 07 мая 2020 
setData(data);

Это просто устанавливает данные, которые у вас уже есть, потому что переменная data не изменилась.

Вы имели в виду установить новые данные, возвращаемые вашим запросом PUT? В таком случае вам нужно await запрос, а затем установить новое состояние.

Вероятно, вам нужно что-то вроде: 

const newData = await axios({
    method: "PUT",
    url: "api/games/" + game.id,
    data: JSON.stringify(game),
    headers: { 'Content-Type': 'application/json; charset=utf-8' }
});
setData(newData);
...