如何更改状态属性的值？

Question

我正在制作一个小应用程序，它获取数据，显示在 DOM 中，并选择一个显示所选用户信息的项目，我通过名为 UserState 的状态管理器处理所有这些，我还将方法添加到显示用户。然后作为一个组件，我有 UserList 和 UserProfile。

这是应该如何工作的，Capture 1

UserState.js

import React, {useState} from 'react';
import UserContext from './UserContext';
import axios from 'axios';

function UserState(props) {
const initialState = {
    users:[],
    selectedUser:null
}

const [state, setState] = useState(initialState) 

const getUsers = async() =>{
    const res = await axios.get("https://reqres.in/api/users")
    const data = res.data.data
    setState({users:data,
    selectedUser:null})
}

const getProfile = async (id) => {
    const res = await axios.get("https://reqres.in/api/users/"+id)
    const {data} = await res.data;
    console.log('Item Selected:',data)
    console.log(setState({selectedUser:data}))

}

return (
    <UserContext.Provider
        value={{
            users:state.users,
            selectedUser: state.selectedUser,
            getUsers,
            getProfile
            }}
    >
        {props.children}
    </UserContext.Provider>
)
}

export default UserState

我通过 Hook useContext 导出该状态及其方法，当我尝试选择用户时问题开始，控制台显示以下错误。

UserList.js

import React,{useContext,useEffect} from 'react'
import UserContext from "../context/User/UserContext"

function UserList(props) {
const  userContext = useContext(UserContext)

useEffect(() => {
     userContext.getUsers();
},[])

return (
    <div>
        <h1>UserList</h1>
        {userContext.users.map(user=>{
            return(
            <a 
                key={user.id}
                href="#!"
                onClick={()=> userContext.getProfile(user.id)}
            >
                <img src={user.avatar} alt="" width="70"/>
                <p>{user.first_name} {user.last_name}</p>
                <p>{user.email}</p>
            </a>)
        }): null}
    </div>
)
}

export default UserList

Profile.js

import React,{useContext} from 'react'
import UserContext from '../context/User/UserContext'

function Profile() {
const {selectedUser} = useContext(UserContext)

return (
    <>
    <h1>Profile</h1>
    {selectedUser ? 
    (
    <div>
        <h1>Selected Profile</h1>
        {/* <img 
            src={selectedUser.avatar}
            alt=""
            style={{width:150}}
        /> */}
    </div>
    ):(<div>
        No User Selected
    </div>)}
    </>
)
}

export default Profile

控制台错误

我尝试更改 selectedUser 的值，但每次控制台都显示该错误。

Answer 1

在你的 getProfile 函数中，你应该像这样使用 setState。

setState({...state, selectedUser:data })

如果您使用setState({selectedUser:data })，则users 将从状态中删除。

Answer 2

您的代码的异步部分似乎存在问题。最初，您没有 state.users 对象，因此当您尝试在行中使用 state.users 对象的属性（如 {userContext.users.map(user=>{...）时，没有要映射的内容，并且由于 map 使用 length 属性，您会收到该错误.在尝试映射之前，您应该先检查该组件是否具有userContext.users 属性以及长度是否大于或等于 1。

您也在以一种有点奇怪的方式使用useState 钩子，这让事情有点混乱。通常在使用useState 钩子时，每个元素都有自己的状态，而不是设置一个状态来处理多个元素。在这一个中，您将设置两种独立的状态，一种称为users，一种称为selectedUser，并独立设置它们。否则你可能会有一些奇怪的重新渲染。

顺便说一下，R​​eact 错误代码非常具有描述性。它告诉您state.users 未定义，它无法访问未定义的属性映射，并且它位于您的 UserList.js 组件的第 13 行。都是真的。