安慰反应

Question

我刚开始使用 React，这是我的第一个项目。我添加了一个删除图标。我只想在按下它时控制台日志将显示一些文本，仅用于测试和了解道具如何在组件之间传递。问题是此文本未显示在控制台中。如果有人可以提供帮助，我将不胜感激。

我有 app.js

中包含的用户组件、allUser 组件、home 组件

User.js 分量

import "./User.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

function User(props) {
  return (
    <div className="singleUser">
      <div className="user">
        <div>{props.id}</div>
        <div>{props.name}</div>
        <div>{props.phone}</div>
        <div>{props.email}</div>
      </div>

      <div className="iconClose">
        <FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete} />
      </div>
    </div>
  );
}

import User from "./user";
import { useState, useEffect } from "react";

function Allusers({ onDelete }) {
  const [isLoading, setIsLoading] = useState(false);
  const [actualData, setActualData] = useState([""]);

  useEffect(() => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        // const finalUsers = [];
        // for (const key in data) {
        //   const u = {
        //     id: key,
        //     ...data[key],
        //   finalUsers.push(u);
        // }
        setIsLoading(false);
        setActualData(data);
      });
  }, []);
  if (isLoading) {
    return (
      <section>
        <p>Loading ... </p>
      </section>
    );
  }
  return actualData.map((singlUser) => {
    for (const key in singlUser) {
      // console.log(singlUser.phone);
      return (
        <div className="userCard" key={singlUser.id}>
          <User
            id={singlUser.id}
            name={singlUser.name}
            email={singlUser.email}
            phone={singlUser.phone}
            key={singlUser.id}
            onDelete={onDelete}
          />
        </div>
      );
    }
  });
}

export default Allusers;

import Navagation from "../components/Navagation";
import Allusers from "../components/Allusers";
import Footer from "../components/Footer";

function Home() {
  const deleteHandler = () => {
    console.log("something");
  };
  return (
    <section>
      <Navagation />
      <Allusers onDelete={deleteHandler} />
    </section>
  );
}

export default Home;

Answer 1

您实际上并不是在 User.js 中使用 () => props.onDelete 调用函数——它需要是 () => props.onDelete()（注意在 props.onDelete 之后添加的括号）。

<FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete} />

...应该是：

<FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete()} />

安慰反应

Consoling React

frontend

reactjs