渲染不同的组件（`UserTable`）时无法更新组件（`App`）答案

【问题标题】：Cannot update a component (`App`) while rendering a different component (`UserTable`)渲染不同的组件（`UserTable`）时无法更新组件（`App`）
【发布时间】：2021-12-29 14:40:41
【问题描述】：

我正在尝试在功能组件中学习 React Hooks，并且正在关注 React Hooks tutorial 但我收到错误：在渲染不同组件 (UserTable) 时无法更新组件 (App)，并且错误堆栈表明这与 UserTable.js 中 delete button 中的 onClick={props.deleteUser(user.id)} 属性有关。我看到几篇帖子表明应该尝试 useEffect() 来解决这个问题，所以我尝试让 deleteUser 更新状态变量，然后让 useEffects 更改 users 数组。虽然代码编译得很好，但页面只是挂起并最终因“内存不足”错误而超时（我假设是由于尝试渲染和重新渲染的无限循环引起的？）。任何想法如何解决这种情况？

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;

UserTable.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

【问题讨论】：

您会立即在子进程中调用deleteUser 函数。 onClick={props.deleteUser(user.id)} 应该是 onClick={() => props.deleteUser(user.id)}。投票结束为“不可复制或由错字引起”。干杯。
谢谢！做到了。

标签： reactjs react-hooks

【解决方案1】：

你只需要改变

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

到

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

否则，您的删除功能将在渲染本身时自动触发

【讨论】：