React组件未正确返回简单控制台日志[重复]

Question

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

{身份证： 1，姓名：约翰·史密斯，年龄： 27，身高： 186厘米，性别：男}

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

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

我调用一个“Header”函数，它使用一个“PrintOut”函数，该函数显示DOM上的每个配置文件以及一个delete、edit和Change-gender按钮。

它还需要3个道具，配置文件状态，删除功能和切换（性别变化）功能。性别变更功能是点击启动的，目前，它所要做的只是控制台日志“你点击了性别变更功能”和ID。

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

我想知道为什么会出现这种情况，我能做些什么来解决它？

这是密码

应用程序。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;

打印输出。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

你没有传递id那个函数

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

Answer 2

在这里，您可以在呈现函数时直接调用该函数：

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

因此，您需要将其更改为回调函数：

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

还将id添加到子组件中