React hooks - useState () не перерисовывает интерфейс с новыми обновлениями состояния - PullRequest
Новая
       6

React hooks - useState () не перерисовывает интерфейс с новыми обновлениями состояния

0 голосов
/ 02 февраля 2019

Я пробую новые React Hooks, и я немного застрял, поскольку пользовательский интерфейс не обновляется при обновлении локального состояния.Вот мой код, 

import React, { useState, useEffect } from 'react';
import Post from './Post'
import PostForm from './PostForm';
import axios from 'axios';

function PostsList() {
  const [posts, setPosts] = useState([]);
  
  // setting up the local state using useEffect as an alternative to CDM
  useEffect(() => {
    axios.get('...')
      .then(res => {
        // the resposne is an array of objects
        setPosts(res.data)
      })
  })
  
  const handleSubmit = (data) => {
    // the data I am getting here is an object with an identical format to the objects in the posts array
    axios.post('...', data)
      .then(res => {
        // logging the data to validate its format. works fine so far..
        console.log(res.data);
        // the issue is down here
        setPosts([
          ...posts,
          res.data
        ])
      })
      .catch(err => console.log(err))
  }
  
  return (
    <div>
      <PostForm handleSubmit={handleSubmit}  />
      <h3>current posts</h3>
      
      { posts.map(post => (
        <Post key={post.id} post={post} />
      )) }
    </div>
  )
}

, когда я отправляю форму, пользовательский интерфейс мигает в течение доли секунды, а затем отображает текущее состояние без нового обновления, кажется, что что-то препятствует повторной визуализацииновое состояние.Если требуется больше кода / уточнения, пожалуйста, оставьте комментарий ниже.заранее спасибо.

1 Ответ

0 голосов
/ 02 февраля 2019

хорошо, проблема решена с помощью полезной подсказки от @ skyboyer,
, так что изначально произошло то, что useEffect() действует как componentDidMount() & componentDidUpdate() в то же время, что означает, что при каждом обновлениисостояние, useEffect() вызывается, что означает сброс состояния с исходными данными, поступающими с сервера.чтобы исправить проблему, мне нужно было сделать так, чтобы useEffect() отображал компонент только один раз, когда он был создан / обработан, а не каждый раз, когда происходит обновление состояния.и это делается путем добавления пустого массива в качестве второго аргумента к функции useEffect().как показано ниже. 

 useEffect(() => {
   axios.get('...')
    .then(res => {
      setPosts(res.data)
     })
   }, [])
спасибо :)
...