maisteRR
@maisteRR
ищу в себе front-end разработчика

Как получать актуальные данные после POST запроса(useState)?

Здравствуйте, возникла проблема, ответ на который сложно найти... Поисковый запрос получается запутанней нежели сама ситуация. У меня есть два компонента AddProduct(который отображается по пути localhost:3000/products/add) и ProductList(localhost:3000/products). Я делаю POST запрос из AddProduct и хочу получить сразу актуальные данные(с новым продуктом) в компоненте ProductsList.
Сейчас у меня такие наработки, но после редиректа я вижу не актуальные данные. Как это можно исправить?

AddProduct:
import React,  {useState} from 'react';
import api from './api';
import { Redirect } from 'react-router'

const AddProduct = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [redirect, setRedirect] = useState(false);

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }
  const addProduct = (e) =>{
    e.preventDefault();
    const product = {
      name: name,
      description: description
    }
    api.addProduct(product)
    .then((req, res) =>{
      console.log(res);
      setRedirect(true);
    })
  }
  if(redirect) {
    return <Redirect to={'/products'} />
  }
return (
    <div>
        <form onSubmit={addProduct}>
            <input type="text" name="name" value={name} onChange={updateName}/>
            <input type="text" name="description" value={description} onChange={updateDescription}/>
            <button>Submit</button>

    </div>
  );
}
export default AddProduct;


ProductsList:
import React, {useContext} from 'react';
import {ProductsContext} from './ProductsContext';

const ProductsList = () => {
  const [data] = useContext(ProductsContext);
  return (
    <div>
      {console.log(data)}
        {data.products.map((product, index)=>(
            <div key={index}>
                <p>{product.name}</p>
                <p><i>{product.description}</i></p>
            </div>
        ))}
    </div>
  );
}
export default ProductsList;


И App.js на всякий случай:
import React from 'react';
import {ProductsProvider} from './ProductsContext';
import ProductsList from './ProductsList';
import AddProduct from './AddProduct';
import { BrowserRouter as Router, Route} from 'react-router-dom';
const App = () => {
  return (
    <div>
      <Router >
        <ProductsProvider>
          <Route exact path="/products" component={ProductsList} />
          <Route exact path={'/products/add'} component={AddProduct} />
        </ProductsProvider>
      </Router>
    </div>
  );
}
export default App;
  • Вопрос задан
  • 168 просмотров
Пригласить эксперта
Ответы на вопрос 2
@lazalu68
Suspended ))
Я вообще про реакт ничего не знаю, никогда с ним не работал, но тут у вас безотносительно к фреймворку проблемы организации асинхронного workflow. На вашем месте я бы забил на колбэки (then, catch, finally) и использовал бы их только в крайнем случае, а вместо них использовал бы async/await, которые сильно упрощают восприятие происходящего. h88p абсолютно прав, надо хоть как-то следить за тем выполнился api.addProduct или нет; в этом случае я бы возвращал из функции addProduct промис который вам отдаёт аксиос, тогда она бы выглядела как-то так:
function addProduct(product) {
    return axios.post( ROOT_URL + '/add', product );
}


Тогда в компоненте AddProduct вы могли бы (предварительно сделав контекст асинхронным) вместо этого:

api.addProduct(product)
.then((req, res) =>{
      console.log(res);
      setRedirect(true);
})


...выполнять это:

await api.addProduct(product);
console.log(res);
setRedirect(true);


...что гарантировало бы вам последовательное выполнение операций. Собственно, в первом же блоке с примерами на странице axios это описано.

Опять же, я в реакте ни хрена не знаю, но полагаю чтобы сделать AddProduct асинхронным достаточно вместо этого:
const AddProduct = () => {}
...написать это:
const AddProduct = async () => {

ЗЫ: изо всех сил советую вам ознакомиться с тем, что прислал Владимир, т.к. если написанное мной это бредни с точки зрения разработчика ангуляра, то насколько я понимаю redux-thunk это родной реактовый инструмент для борьбы с подобными ситуациями; его использование тут было бы вероятно гораздо более предпочтительней
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы