React useState 未在 Axios 响应上更新

Question

在服务器成功响应后，我正在尝试更新点击喜欢的次数，并且一切正常。 但是，喜欢的数量没有更新，我需要刷新页面才能看到元素上的更新值。

function UserPage() {

    const [posts, setPosts] = useState([])

    let {authTokens, user} = useContext(AuthContext)

    useEffect (()=>{
        const getData = async () => {
             const{data: ServerResponse} = await axios.get('http://127.0.0.1:8000/api/tweets/');
       
        
         setPosts(ServerResponse)
        }
        getData();
    }, [])




    const handleLike = (id)=>{

        let posts_list = posts

        const post_indx = posts_list.findIndex((post=> post.id==id))
        posts_list[post_indx].likes++
        axios({
            method: 'post',
            headers: {
                'Content-Type': 'application/json',
                Authorization: 'Bearer ' + String(authTokens.access)
              },
            url: 'http://127.0.0.1:8000/api/tweets/action/',
            data: {
              id: id,
              action:"like"
            }
          }).then(function(response){
              
            setPosts(posts_list)
           

          }

          )
        
    }
    const handleDelete=(id)=>{
       // console.log("hi")
    }

        return (


            <div>
                <NavBar className='navbar' />
                {user && <p>Hello {user.username}</p>}
            {
                posts.map(post=>(
                    <SingleTweet onDelete={() => handleDelete(post.id)} numLikes={post.likes} onLike={() => handleLike(post.id)} id={post.id} content={post.content}  />
                ))
            }
                            
            </div>

        );
    
}
 

另外，SingleTweet 组件如下：

class SingleTweet extends Component {
    state = {  } 
    render() { 
        return (
            <div className='border'>
                <div className='id-ret'>
                <h3>{this.props.id}</h3>
                <button onClick={this.props.onLike} type="button" className="btn btn-outline-primary me-1">Retweet</button>
                </div>
                <p>{this.props.content}</p>
                <div className='tweet-buttons'>
                <div>
                <button onClick={this.props.onLike} type="button" className="btn btn-primary me-1">{this.props.numLikes} Likes</button>
                <button onClick={this.props.onLike} type="button" className="btn btn-outline-primary me-1">Unlike</button>
                </div>
                <button onClick={this.props.onDelete} type="button" class="btn btn-danger me-2">Delete</button>
                </div>
            </div>
        );
    }
}

任何建议将不胜感激

Answer 1

你的 state 是一个数组。 由于 object 引用保持不变，React 不会更新 state 认为没有任何变化。

它在页面重新加载后显示的原因是因为您在后端更新了相同内容，并且后端在加载时返回正确的数据，即新的 object。

解决问题的一种方法是执行以下操作：

setPosts([...posts_list])

这将创建一个具有相同数据的新数组，从而导致引用发生变化。 一旦引用发生变化，React 就会知道更新 state。