我无法从 AppContexet.Consumer 映射用户状态

Question

我通过 AppContexet.Provider 向 AppContexet.Consumer 发送了一个使用状态， 我可以在组件上看到 - 数据已获取但是当我托盘映射状态时我得到一个错误。 我做错了什么？

这是正确的 :

import {useState} from 'react'
import Ex53Child from './Ex53Child'
import AppContexet from './Appcontext'
import React, {Component} from 'react';


const Ex53perent = ()=>
{
   const [name,setName] = useState('')
   const [age,setAge] = useState()
   const [users,setUsers] = useState ([])
   const [user,setUser] = useState ({name : '' , age : ''})


   
    return(<AppContexet.Provider value = {{...users}}>
    <div>
        
       <h1> Ex53perent comp </h1>
       Name: <input type = "text" onChange = {e=>setUser({...user ,name : e.target.value})}/><br/>
       Age : <input type = "text" onChange = {e=>setUser({...user ,age : e.target.value})}/><br/>
       <input type = "button" value ="Add" onClick ={e=>setUsers([...users,user])}/>
       <Ex53Child/>
      
      
      
        </div>
        </AppContexet.Provider>
        )
}
export default Ex53perent;

---

这是 child :

import {useState} from 'react'
import AppContexet from './Appcontext'
import Ex53GrenChild from './Ex53GrenChild'



const Ex53Child = ()=>
{
   
const [myUesr,setMyUser] = useState([])
   
    return(<AppContexet.Consumer>

        {
            dataContext =>
            (
                <div>
                    <h1> Ex53Child comp </h1>
                    
                    {
                        dataContext.users.map((item,index)=>
                        {
                            return<il key = {index}>
                                <li>{item.name}</li>
                                <li>{item.age}</li>
                            </il>
                        })
                    }
                    

                    <Ex53GrenChild/>
                
                </div>
            )
        }
        
        </AppContexet.Consumer>
        )
}
export default Ex53Child;

这是应用上下文文件：

import React from 'react'

const AppContexet = React.createContext();

export default AppContexet;

单值就可以了 但我不能从一些重新映射arry

Answer 1

问题

users状态是一个数组：

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

并且您正在将数组展开到一个对象中：

<AppContexet.Provider value={{ ...users }}>
  ...
</AppContexet.Provider>

这使得上下文值成为对象，其中数组索引现在是对象键，数组值是对象值。

解决方案

将上下文值转换为数组

您可以保持这种方式，然后您需要将上下文值转换回子数组中的数组：

<AppContexet.Consumer>
  {dataContext => (
    <div>
      <h1>Ex53Child comp</h1>
      {Object.values(dataContext).map((item, index) => {
          return (
            <il key={index}>
              <li>{item.name}</li>
              <li>{item.age}</li>
            </il>
          );
        })
      }
      <Ex53GrenChild/>
    </div>
  )}
</AppContexet.Consumer>

修复上下文值，将其保存为数组

最好只将 users 和上下文值保持为一个数组。不要将 users 状态传播到上下文值中。

<AppContexet.Provider value={{ users }}>
  ...
</AppContexet.Provider>

现在的上下文值是一个具有单个 users 属性 的对象，即 users 状态。

<AppContexet.Consumer>
  {dataContext => (
    <div>
      <h1>Ex53Child comp</h1>
      {dataContext.users.map((item, index) => {
          return (
            <il key={index}>
              <li>{item.name}</li>
              <li>{item.age}</li>
            </il>
          );
        })
      }
      <Ex53GrenChild/>
    </div>
  )}
</AppContexet.Consumer>

使用useContext挂钩

由于 Ex53Child 是一个函数组件，所以使用 AppContexet.Consumer 组件渲染函数有点傻。请改用 useContext 钩子。

const Ex53Child = () => {
  const [myUesr, setMyUser] = useState([]);
  const { users } = useContext(AppContexet);
   
  return (
    <div>
      <h1>Ex53Child comp</h1>
      {users.map((item, index) => (
        <il key={index}>
          <li>{item.name}</li>
          <li>{item.age}</li>
        </il>
      ))}
      <Ex53GrenChild />
    </div>
  );
}

只需将 users 作为 prop

此外，由于 Ex53perent 直接渲染 Ex53Child，当 users 状态可以简单地作为道具传递时，使用上下文是不必要的复杂性。

const Ex53perent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState();
  const [users, setUsers] = useState([]);
  const [user, setUser] = useState({ name: '', age: '' });
   
  return (
    <div>
      <h1> Ex53perent comp </h1>
      Name:{" "}
      <input
        type="text"
        onChange={e => setUser({ ...user, name: e.target.value })}
      />
      <br/>
      Age:{" "}
      <input
        type="text"
        onChange={e => setUser({ ...user, age: e.target.value })}
      />
      <br/>
      <input
        type="button"
        value="Add"
        onClick={e => setUsers([...users, user])}
      />
      <Ex53Child users={users} /> // <-- pass users as prop to child
    </div>
  );
};

...

const Ex53Child = ({ users }) => { // <-- access users from props
  const [myUesr, setMyUser] = useState([]);
   
  return (
    <div>
      <h1>Ex53Child comp</h1>
      {users.map((item, index) => (
        <il key={index}>
          <li>{item.name}</li>
          <li>{item.age}</li>
        </il>
      ))}
      <Ex53GrenChild />
    </div>
  );
}