reactjs - 无法在呈现不同组件 (`App` 时更新组件 (`UserTable` )

Question

我正在尝试学习功能组件中的 React Hooks，并且正在关注 React Hooks tutorial但出现错误:无法在呈现不同组件 (UserTable) 时更新组件 (App)，并且错误堆栈表明这与 onClick 有关={props.deleteUser(user.id)} 属性在UserTable.js 中的删除按钮。我看到一些帖子表明应该尝试使用 useEffect() 来解决这个问题，所以我尝试让 deleteUser 更新状态变量，然后让 useEffects 更改 用户数组。虽然代码编译得很好，但页面只是挂起并最终因“内存不足”错误而超时(我假设是由尝试呈现和重新呈现的无休止循环引起的？)。有什么想法可以解决这种情况吗？

App.js

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

const App= () =>  {

  const usersData = [
    {id: 1, name: "Tania", username: "floppydiskette"},
    {id: 2, name: "Craig", username: "siliconeidolon" },
    {id: 3, name: "Ben", username: "benisphere"}
  ]

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

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

   const deleteUser = (id) => {
     setUsers(users.filter((user)=>user.id !== id))
   }

  return (
    <div className="container">
      <h1> SIMPLE CRUD APP 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} deleteUser={deleteUser}/> 
        </div>
      </div>
    </div>
  );
}

export default App;

用户表.js

import React from 'react';

const UserTable = (props) => {

    return(
    <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>
>>> This triggers the `cannot update a component . . .` error:
                        <button className="button muted-button" onClick={props.deleteUser(user.id)}>Delete</button>
                    </td>
                </tr>
                ))
            ) : (
                <tr colspan={3}>No Users</tr>
            )}
        </tbody>
    </table>
    );
}

export default UserTable

Answer 1

你只需要改变

onClick={props.deleteUser(user.id)}>Delete</button>

到

onClick={()=> props.deleteUser(user.id)}>Delete</button> 

否则你的删除函数将在渲染时自动触发