未处理的拒绝（TypeError）：appUser 不可迭代

Question

我正在尝试将来自我的 rest api 的响应设置为 React 状态。我试着这样做，就像我在这篇 SO 帖子中读到的那样：useState object set

这是我尝试过的：

Admin.js

import React, {useState} from "react";
import {Button} from "../components/AuthForms"
import {useAuth} from "../context/auth";
import axios from 'axios';

function Admin(props) {

    ...

    const [username, setUsername] = useState(null);
    const [appUser, setAppUser] = useState({pk:-1, username: '', email: '', first_name: '', last_name:''});
    const key = !authTokens ? "Logged out" : authTokens.key;


    if (!!authTokens) {
        const url = 'http://localhost:8000/rest-auth/user/';
        const withCredentials = true;
        const method = 'get';
        axios.request({method, url, withCredentials}).then(response => {
            console.log('Admin() response is ', response);
            setUsername(response.data.username);
            setAppUser(...appUser, response.data); <==== here's where I get the error.
        });

    ...

    // display the logged in user info.
    return (
        <div>
            <div>Admin Page</div>
            <div>Key: {key}</div>
            <div>Username: {username}</div>
            <div>App User pk: {appUser.pk} username: {appUser.username}</div>
            <Button onClick={logOut}>Log out</Button>
        </div>);
}

export default Admin;

appUser应该如何设置？

谢谢

Answer 1

你忘记了对象括号：

 setAppUser({...appUser, ...response.data})

也将其放在useEffect 中，以便仅在authTokens 更改时获取数据：

useEffect(()=>{
    if (authTokens) {
        const url = 'http://localhost:8000/rest-auth/user/';
        const withCredentials = true;
        const method = 'get';
        axios.request({method, url, withCredentials}).then(response => {
            console.log('Admin() response is ', response);
            setUsername(response.data.username);
            setAppUser({...appUser, response.data}); <==== here's where I get the error.
        });
}, [authTokens]); // The [authTokens] means, that it will only fetch the data again if authTokens changes

还有你为什么要!!authTokens？您可以删除!!。