Javascript 将嵌套组件附加到具有修改上下文能力的上下文提供程序

我试图遍历一个对象数组，但它没有给我一个错误。我有3个文件，我正试图从中提取数据，我在数组和对象遍历方面不是很好，在react contextAPI方面也是新的，所以一些帮助和指导将不胜感激

这是userContext.js文件：

import React, { useState, createContext } from 'react';

export const UserContext = createContext();
export const UserProvider = props => {
var [users, setUsers] = useState([
    {
        "users": [
            {
                id: '1',
                name: 'user1'
            },
            {
                id: '2',
                name: 'user2'
            },
            {
                id: '3',
                name: 'user3'
            },
            {
                id: '4',
                name: 'user4'
            },
        ],
        "todos": [
            {
                "userId": 1,
                "id": 1,
                "title": "delectus aut autem",
                "completed": false
            },
            {
                "userId": 1,
                "id": 2,
                "title": "quis ut nam facilis et officia qui",
                "completed": false
            },
            {
                "userId": 2,
                "id": 1,
                "title": "fugiat veniam minus",
                "completed": false
            },
            {
                "userId": 2,
                "id": 2,
                "title": "et porro tempora",
                "completed": true
            },
        ]
    }

]);
return (
<UserContext.Provider value={[users, setUsers]}>
    {props.children}
</UserContext.Provider>
);
}

import React, {useState, useContext} from 'react';
import {Form} from 'react-bootstrap'
import User from './User'
import {UserContext} from './UserContext'


const UserList = () => {

const [users, setUsers] = useContext(UserContext);
return(
    <Form.Group controlId="exampleForm.ControlSelect1">
    <Form.Label>Please select a user</Form.Label>
    <Form.Control as="select" onChange={()=> {this.changeUser()}}>
        {
            Object.keys(users).map(fst =>{
                users[fst].map(sub_fst => 
                    {
                    <User name={sub_fst.name} key={sub_fst.id} />
                }

                );
            })
        }
    </Form.Control>
</Form.Group>
);
}
export default UserList;

import React，{useState，createContext}来自“React”；
export const UserContext=createContext（）；
export const UserProvider=props=>{
var[users，setUsers]=useState([
{
“用户”：[
{
id:'1'，
名称：“user1”
},
{
id:'2'，
名称：'user2'
},
{
id:'3'，
名称：“user3”
},
{
id:'4'，
名称：“user4”
},
],
“待办事项”：[
{
“用户ID”：1，
“id”：1，
“标题”：“授权或授权”，
“已完成”：false
},
{
“用户ID”：1，
“id”：2，
“标题”为“我的脸和办公室”，
“已完成”：false
},
{
“用户ID”：2，
“id”：1，
“标题”：“福吉亚威尼斯小号”，
“已完成”：false
},
{
“用户ID”：2，
“id”：2，
“标题”：“临时工”，
“已完成”：真
},
]
}
]);
返回(
{props.children}
);
}

这是userList.js文件：

import React, { useState, createContext } from 'react';

export const UserContext = createContext();
export const UserProvider = props => {
var [users, setUsers] = useState([
    {
        "users": [
            {
                id: '1',
                name: 'user1'
            },
            {
                id: '2',
                name: 'user2'
            },
            {
                id: '3',
                name: 'user3'
            },
            {
                id: '4',
                name: 'user4'
            },
        ],
        "todos": [
            {
                "userId": 1,
                "id": 1,
                "title": "delectus aut autem",
                "completed": false
            },
            {
                "userId": 1,
                "id": 2,
                "title": "quis ut nam facilis et officia qui",
                "completed": false
            },
            {
                "userId": 2,
                "id": 1,
                "title": "fugiat veniam minus",
                "completed": false
            },
            {
                "userId": 2,
                "id": 2,
                "title": "et porro tempora",
                "completed": true
            },
        ]
    }

]);
return (
<UserContext.Provider value={[users, setUsers]}>
    {props.children}
</UserContext.Provider>
);
}

import React, {useState, useContext} from 'react';
import {Form} from 'react-bootstrap'
import User from './User'
import {UserContext} from './UserContext'


const UserList = () => {

const [users, setUsers] = useContext(UserContext);
return(
    <Form.Group controlId="exampleForm.ControlSelect1">
    <Form.Label>Please select a user</Form.Label>
    <Form.Control as="select" onChange={()=> {this.changeUser()}}>
        {
            Object.keys(users).map(fst =>{
                users[fst].map(sub_fst => 
                    {
                    <User name={sub_fst.name} key={sub_fst.id} />
                }

                );
            })
        }
    </Form.Control>
</Form.Group>
);
}
export default UserList;

import React，{useState，useContext}来自“React”；
从“react bootstrap”导入{Form}
从“./User”导入用户
从“./UserContext”导入{UserContext}
常量用户列表=（）=>{
const[users，setUsers]=useContext（UserContext）；
返回(
请选择一个用户
{this.changeUser（）}}>
{
Object.keys（users.map）（fst=>{
用户[fst].map（sub_fst=>
{
}
);
})
}
);
}
导出默认用户列表；

这就是我希望在User.js中显示数据的地方：

import React from 'react';

const User = (props) => {
return (

    <option>

        {props.name}

    </option>

);

}
export default User;

从“React”导入React；
常量用户=（道具）=>{
返回(
{props.name}
);
}
导出默认用户；

---

感谢您的帮助和纠正。

我觉得您在一些地方的语法有点混乱，所以稍微重构一下您的代码就可以这样工作：

const{useState，useContext，useffect，createContext}=React，
{render}=ReactDOM，
{Form}=ReactBootstrap
const defaultState={“users”：[{id:'1'，name:'user1'}，{id:'2'，name:'user2'}，{id:'3'，name:'user3'}，{id:'4'，name:'user4'}，]，“todos:[{“userId:”1，“id:”1，“title:”deletus aut aut autem”，“completed:”false}，{“userId:”1，“title:”false:”false:“userId:”false:“{：2，“id”：2，“title”：“et porro tempora”，“completed”：true}]，currentUserId:null，setCurrentUserId:（）=>{}，
UserContext=createContext（默认状态）
const UserProvider=（{children}）=>{
常量[状态，设置状态]=使用状态({
…默认状态，
setCurrentUserId:userId=>setState（{…状态，currentUserId:userId}）
})
返回(
{儿童}
)
}
常量User=（{name，value}）=>{name}
常量用户列表=（）=>{
const{users，currentUserId，setCurrentUserId}=useContext（UserContext）
返回(
请选择一个用户{currentUserId&&`（当前用户为${users.find（{id}）=>id==currentUserId.name}）`}
setCurrentUserId（值）}>
{
[{}，…用户].map（（{id，name}）=>）
}
)
}
渲染(
,
document.getElementById（'root'））
)

---

无法工作用户是一个对象，映射时会抛出错误。问题中提供的代码应该可以工作。是的，但OP仍然希望循环对象，而不仅仅是一个数组。谢谢大家，是的，我想在整个数组中循环，它也可能增加或减少实际上我希望代码在3个单独的文件中，我想您已经获取了UserContext.js文件，并将其添加到UserList.js文件中。您的代码正在工作，但我只是希望将上下文分隔开，以便我也可以在其他文件中调用它。我认为可能吗？@H_alt这只是一个示例，请将代码移动到单独的文件中。提供的代码应该可以工作，您是否收到任何错误？在我的代码中，我收到了以下错误：应为赋值或函数调用，而不是看到表达式