如何更改状态属性的值？

Question

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

这是应该如何工作，捕获 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 导出 That state 及其方法，当我尝试选择用户时问题开始，控制台显示以下错误。

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 对象，因此当您尝试在像 {userContext.users.map(user=>{... 这样的行中使用 state.users 对象的属性时，没有要映射的内容，并且由于映射使用长度属性，你得到了那个错误。在尝试映射之前，您应该首先检查该组件是否具有 userContext.users 属性并且长度是否大于或等于 1。

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

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

如何更改状态属性的值？

How to change th value of a state property?

javascript

state

key-value

ecmascript-6

reactjs

如何更改状态 属性 的值？

How to change th value of a state property?

javascript

state

key-value

ecmascript-6

reactjs

如何更改状态属性的值？