1

我正在尝试遍历一组对象，但它没有给我一个错误。我有 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>
);
}

这是 userList.js 文件：

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;

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

import React from 'react';

const User = (props) => {
return (

    <option>

        {props.name}

    </option>

);

}
export default User;

感谢任何帮助和纠正。

4

1 回答 1

1

在我看来，你在几个地方有点弄乱了语法，所以稍微重构你的代码会像这样工作：

const { useState, useContext, useEffect, 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":"delectus aut autem","completed":false},{"userId":1,"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}], currentUserId: null, setCurrentUserId: () => {}},
      UserContext = createContext(defaultState)
      

const UserProvider = ({children}) => {
  const [state, setState ] = useState({
      ...defaultState,
      setCurrentUserId: userId => setState({...state, currentUserId:userId})
  })
        
  return (
      <UserContext.Provider value={state} >
        {children}
      </UserContext.Provider>
  )
}


const User = ({name,value}) => <option {...{value}}>{name}</option>

const UserList = () => {

const  {users, currentUserId, setCurrentUserId} = useContext(UserContext)

return (
      <Form.Group controlId="exampleForm.ControlSelect1">
      <Form.Label>Please select a user {currentUserId && `(current user is ${users.find(({id}) => id == currentUserId).name})`}</Form.Label>
      <Form.Control as="select" onChange={({target:{value}}) => setCurrentUserId(value)}>
          {
              [{},...users].map(({id,name}) => <User {...{name, key: id, value: id}} />)
          }
      </Form.Control>
  </Form.Group>
 )
}


render (
  <UserProvider>
    <UserList />
  </UserProvider>,
  document.getElementById('root')
)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>

于 2020-02-21T11:58:57.227 回答