React Component没有正确返回简单的控制台日志[重复]

Question

我是新手，所以如果我似乎不理解一些明显的概念，请耐心等待，但我编写了一个配置文件结构如下的配置文件日志函数：

{id:1，姓名：John Smith，年龄：27，身高：186cm，性别：男}

我正在设计一个反应函数（用于学习目的），它对配置文件进行排序、添加、删除和修改。

要编辑配置文件，我正在使用挂钩。然后我将钩子函数用作组件内部的道具。

我调用了一个“Header”函数，它使用“PrintOut”函数显示 DOM 上的每个配置文件以及一个删除、编辑和更改性别按钮。

它还包含 3 个道具，个人资料状态、删除功能和切换（性别更改）功能。 性别更改功能在单击时启动，现在，它所要做的只是控制台日志“您单击了性别更改功能”以及 ID。

控制台并没有这样做，而是只为每个配置文件记录该句子，而无需单击。当我点击“更改性别”按钮时，什么也没有发生。

我想知道为什么会这样，我可以做些什么来解决它？

这里是代码

App.js

import "./styles.css";
import Header from "./component/Header";
import Buttons from "./component/Buttons";
import { useState } from "react";
 
export default function App() {
 const [names, assortNames] = useState([
   {
     id: 1,
     name: "John",
     age: 18,
     height: 184,
     gender: "male"
   },
   {
     id: 2,
     name: "Billy",
     age: 24,
     height: 191,
     gender: "male"
   },
   {
     id: 3,
     name: "Sara",
     age: 26,
     height: 171,
     gender: "female"
   },
   {
     id: 4,
     name: "Ryan",
     height: 186,
     age: 27,
     gender: "male"
   }
 ]);
 
 const AgeFilter = () => {
   assortNames(
     [...names].sort((a, b) => {
       return b.age - a.age;
     })
   );
 };
 
 const nameFilter = () => {
   assortNames([...names].sort((a, b) => a.name.localeCompare(b.name)));
 };
 const heightFilter = () => {
   assortNames(
     [...names].sort((a, b) => {
       return b.height - a.height;
     })
   );
 };
 
 const DeleteName = (id) => {
   assortNames(names.filter((names) => names.id !== id));
 };
 
 const GenderChange = (id) => {


 console.log('You clicked gender change function', id)
 };
 
 return (
   <div className="container">
     <Buttons
       list={names}
       Age={AgeFilter}
       Name={nameFilter}
       Height={heightFilter}
     />
     <Header namez={names} functs={DeleteName} Toggler={GenderChange} />
   </div>
 );
}

Header.js

import PrintOut from "./PrintOut";
 
const Header = ({ namez, functs, Toggler }) => {
 return (
   <>
     {namez.map((name) => (
       <PrintOut key={namez.id} name={name} onDelete={functs} onToggle ={Toggler} />
     ))}
   </>
 );
};
 
export default Header;

PrintOut.js

const PrintOut = ({ name, onDelete, onToggle }) => {
  const Deleter = (id) => {
    onDelete(name.id);
  };

  return (
    <div className={name.gender === "male" ? "male" : "female"} key={name.id}>
      <h3>{name.name}</h3>
      <div className="Age-and-Height">
        <p> {name.age}</p>

        <h4> {name.height} cm</h4>
      </div>
      <button className="btn btn-delete" onClick={() => Deleter(name.id)}>
        Delete
      </button>
      <button className="btn btn-edit">Edit</button>
      <button className="btn " onClick={onToggle(name.id)}>
        Change Gender
      </button>
    </div>
  );
};

export default PrintOut;

Buttons.js

const Buttons = ({ list, Age, Name, Height }) => {
  return (
    <>
      <div className="buttons">
        <button className="btn" onClick={Age}>
          AgeSort
        </button>
        <button className="btn" onClick ={Height}>HeightSort</button>
        <button className="btn" onClick ={Name}>NameSort</button>
        <button className="btn btn-add" >Add</button>
      </div>
    </>
  );
 };
  
 export default Buttons;

Answer 1

这里是在渲染时直接调用函数：

<button className="btn " onClick={onToggle(name.id)}>
    Change Gender
</button>

所以需要改成回调函数：

<button className="btn " onClick={() => onToggle(id)}>
     Change Gender
</button>

还将 id 放入您的子组件

Answer 2

您没有将 id 传递给该函数

Toggler={() => GenderChange(id)}