Как использовать данные, полученные из БД, в useState?

Итак, я использую хук useEffect для извлечения своих данных из базы данных, и после того, как я получу эти данные, я хочу установить его как useState для заголовка и postBody, но это не работает, потому что хук useEffect запускается «последний», как я могу исправить это?

Код:

const [cPost, setCPost] = useState([]);
  const postId = id.match.params.id;

  useEffect(() => {
    axios.get('http://localhost:5000/posts/'+postId)
      .then(posts => {
        setCPost(posts.data);
        console.info("SAS");
      })
  }, []);

   const [title, setTitle] = useState(cPost.title);
   const [postBody, setPostBody] = useState(cPost.postBody);

javascript reactjs react-hooks components

18.12.2020 18:24

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Руководство ChatGPT по продаже мини JS-файлов

JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...

1 026

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В качестве временного и быстрого решения вы можете использовать такой обходной путь:

const [cPost, setCPost] = useState();
const [title, setTitle] = useState();
const [postBody, setPostBody] = useState();

const postId = id.match.params.id;

useEffect(() => {
  axios.get('http://localhost:5000/posts/'+postId)
    .then(post => {
      setCPost(post.data);
      console.info("SAS");
    })
}, []);

useEffect(() => {
  if (cPost) {
    setTitle(cPost.title);
    setPostBody(cPost.postBody);
  }
}, [cPost]);

Или второй вариант:

const [cPost, setCPost] = useState();
const [title, setTitle] = useState();
const [postBody, setPostBody] = useState();

const postId = id.match.params.id;

useEffect(() => {
  axios.get('http://localhost:5000/posts/'+postId)
    .then(post => {
      setCPost(post.data);
      setTitle(post.title);
      setPostBody(post.postBody);
      console.info("SAS");
    })
}, []);

Но в будущем я бы рекомендовал делать side effects лайк API запросы и другие с помощью специальных библиотек или создавать hook для выполнения API запросов.

Например redux-saga или redux-thunk.

И используйте менеджер состояний, например redux или mobx.

P.S. и подумайте, нужно ли хранить title и body отдельно в компоненте state. У меня есть сильное подозрение, что вам это не нужно.

18.12.2020 18:35