0

我创建了一个之前已预先创建数据的小应用程序。const users = { [id:1, name: ... etc但我决定走得更远一点，用https://randomuser.me这种方式使用 api，至少我可以使用 React 提供的一些 Hooks。

然而，在我的游戏中，我似乎遇到了一个我似乎无法理解的错误。我已经注销了我的 API 调用并得到了users回复，但我无法将它们放在旁边的表格中。

有几个文件，所以我将它们全部添加以使其可读。

当我单击“添加用户”按钮时，我最初遇到的错误再次是“用户不可迭代”，并且在加载时显示没有任何新用户，当我看到 API 调用已触发时并记录它确实有从 API 中提取的用户

应用程序.js

import React, { useEffect, useState } from 'react';
import UserTable from './tables/UserTable'
import AddUserForm from './forms/AddUserForm'
import { getUsers } from './services/getUsers.services'

const App = () => {

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

useEffect(() => {
    getUsers().then(users => {
        setUsers(users);
        console.log(users)
        }); 
  }, []);




const addUser = (user) => {
    user.id = users.length + 1 
    setUsers([...users, user])
}


  return (
    <div className="container">
        <h1> CRUD with Hooks :)</h1>
        <div className="flex-row"> 
            <div className="flex-large">
                <h2>Add user</h2>
                <AddUserForm addUser={addUser} />
            </div>
            <div className="flex-large">
                <h2>View Users</h2>
                <UserTable users={users} />
            </div>
        </div>
    </div>
  );
}

export default App;

getUsers.services.js

export const getUsers = async () => {
    const data = await fetch('https://randomuser.me/api/?results=5');
    return data.json()
}

添加用户表单

import React, {useState} from 'react'

const AddUserForm = (props) => {

const initialFormState = {id: null, name: '', username: ''}

const [user,setUser] = useState(initialFormState)

const handleInputChange = (event) => {
    const {name , value} = event.target
    setUser({...user, [name]: value })
 }
    return (
        <form
        onSubmit={(event) => {
            event.preventDefault()
            if (!user.name || !user.username) return

            props.addUser(user)
            setUser(initialFormState)
        
        }}
        >
            <label>Name</label>
            <input 
            type='text' 
            name='name' 
            value={user.name}
            onChange={handleInputChange}
            />
            <label>Username</label> 
            <input 
            type='text' 
            name='username' 
            value={user.username}
            onChange={handleInputChange}
            />
            <button>Add New User</button>
        </form>
    )
}

export default AddUserForm

用户表.js

import React from 'react'

const UserTable = (props) => (
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
      {props.users.length > 0 ? (
        props.users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.username}</td>
            <td>
              <button className="button muted-button">Edit</button>
              <button className="button muted-button">Delete</button>
            </td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={3}>No users</td>
        </tr>
      )}
    </tbody>
  </table>
)

export default UserTable
4

0 回答 0