Question

我正在尝试新的React Hooks，由于本地状态更新时UI并未更新，我有点卡住了。这是我的代码，

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>
  )
}

当我提交表单时，UI会闪烁一会儿，然后呈现当前状态而不进行新的更新，似乎是某种原因阻止了它重新呈现新状态。如果需要更多代码/说明，请在下面留下评论。预先感谢。

Answer 1

好的，通过@skyboyer的有用提示解决了问题，
所以最初发生的是，useEffect()的行为类似于componentDidMount()和componentDidUpdate()，这意味着只要状态更新，useEffect()就会被调用，这意味着使用来自服务器的初始数据重置状态。为了解决这个问题，我需要使useEffect()仅在创建/渲染组件时渲染一次组件，而不是在每次更新状态时都渲染组件。这是通过向useEffect()函数添加一个空数组作为第二个参数来完成的。如下所示。

 useEffect(() => {
   axios.get('...')
    .then(res => {
      setPosts(res.data)
     })
   }, [])

谢谢:)

反应挂钩-useState（）不会使用新的状态更新来重新呈现UI

1 个答案: