反应 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

你的状态是一个数组。由于对象引用保持不变，因此 React 不会更新状态，认为没有任何变化。

它在页面重新加载后显示的原因是因为您在后端和后端更新了相同的内容 returns 加载时的正确数据是一个新对象。

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

setPosts([...posts_list])

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

反应 useState 不更新 Axios 响应

React useState Not Updating on Axios Response

javascript

frontend

response

reactjs

axios