尝试使用 react useState 添加对象数组但出现错误 'Objects are not valid as a React child (found: object with keys {})'

Question

我正在尝试使用 React useState 添加对象数组，但我一直收到错误

Objects are not valid as a React child (found: object with keys {})

这是我在 app.js 中的代码注意：response.data 正在控制台中登录，它的类型是一个对象

const [users, setUsers] = useState([])

useEffect(() => {
    Axios.get("http://localhost:3001/").then((response) => {
        setUsers([...users, response.data])
    }).catch((err) => console.log(err))
}, [])

这是得到api

app.get("/", (req, res) => {
    userModel.find({}, (err, result) => {
        if(!err) {
            res.json(result) //sends 'result' to front end
        } else {
            res.json(err)
        }})
})

正在向前端发送数据（结果）

这是我要添加的数据

[{
    name: 'John',
    age: 20
},
    name: 'Doe',
    age: 23
}]

编辑：正在向用户添加像 [0,1,2] 这样的简单数组，不添加包含对象的数组

编辑 2：这是我的全部功能：

export default function App() {

    const [users, setUsers] = useState([])

    useEffect(() => {
        Axios.get("http://localhost:3001/").then((response) => {
            setUsers([...users, response.data])
        }).catch((err) => console.log(err))
    }, [])

    return(
        <>
            {users.map((user) => {
                return(
                    <div>
                        <h1>{user}</h1>
                    </div>
                )
            })}
        </>
    )
}

Answer 1

您必须按照@Thinker 在评论部分中提到的方式附加response.data。

useEffect(() => {
  Axios.get("http://localhost:3001/")
    .then((response) => {
      setUsers([...users, ...response.data]);
    })
    .catch((err) => console.log(err));
}, []);

然后你必须将它正确地插入到 JSX 中。当前，您直接在 <h1>{user}</h1> 中提供一个对象（这违反了 JSX 语法）。因此按如下方式更正它以正确包含 user 数据。（您可以根据自己的喜好进行修改）

                    <div>
                        <h1>{user.name}</h1>
                        <h1>{user.age}</h1>
                    </div>

尝试使用 react useState 添加对象数组但出现错误 'Objects are not valid as a React child (found: object with keys {})'

Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'

node.js

reactjs

axios

react-hooks

use-state