React 状态不起作用，它不会重新渲染组件

Question

我在更新状态时遇到问题。好吧，我有一段时间没有触摸反应了，我想记住一些事情，所以我从头开始。但是，我遇到了一个问题。问题是 onClick 事件不起作用或 useState 不起作用。我试过谷歌搜索但找不到解决方案。

我使用 useEffect 检查挂钩是否有任何问题，但它在开头显示来自 useEffect 的消息，所以它确实有效。然后问题出在 onClick 或 useState

import React, { useState, useEffect } from "react";
import style from "./App.module.css";
// import Card from "./components/ui/Card";
import Navbar from "./components/nav/Navbar";
import NavbarCart from "./components/nav/NavbarCart";
import FoodDescription from "./components/food/FoodDescription";
import FoodContainer from "./components/food/FoodContainer";
import Food from "./components/food/Food";
// import Backdrop from "./components/modal/Backdrop";
import CartModal from "./components/modal/CartModal";
// import CartContext from "./context/cart-context";

const DUMMY_FOOD = [
  { name: "Sushi", description: "Finest fish and veggeis", price: 22.99 },
  { name: "Schnitzel", description: "A german speciality!", price: 16.5 },
  {
    name: "Barbecue Burger",
    description: "American, raw, meaty",
    price: 12.99,
  },
  { name: "Green Bowl", description: "Healthy...and green...", price: 18.99 },
];

function App() {
  const [cartOpen, setCartOpen] = useState(false);

  useEffect(() => {
    console.log("POCCETAK");
  }, [cartOpen]);

  const onNavbarCartClcikHandler = (e) => {
    console.log(e);
    setCartOpen(true);
  };
  console.log("hahah");

  return (
    <>
      <Navbar onClick={onNavbarCartClcikHandler}>
        <h1>React meals</h1>
        <NavbarCart onClick={onNavbarCartClcikHandler} />
      </Navbar>
      <FoodDescription onClick={onNavbarCartClcikHandler} />
      <FoodContainer onClick={onNavbarCartClcikHandler}>
        {DUMMY_FOOD.map((food) => (
          <Food key={food.name} value={food} />
        ))}
      </FoodContainer>
      {cartOpen ? <CartModal></CartModal> : ""}
    </>
  );
}

export default App;

Answer 1

在你想传递参数的时候做出反应

onClick={(e)=> onNavbarCartClcikHandler(e)}

您还试图在虚拟 dom 上触发 onClick 事件，这就是 onClick 不起作用的原因，因此您可以在子组件中接收它，例如 FoodContainer 并从 div

等真实文档对象中触发

Answer 2

我明白这个问题，请将 Navbar 放在 div 或元素中

 <div onClick={onNavbarCartClcikHandler}>
          <Navbar onClick={onNavbarCartClcikHandler}>
            <h1>React meals</h1>
            <NavbarCart onClick={onNavbarCartClcikHandler} />
          </Navbar>
    </div>

React 状态不起作用，它不会重新渲染组件

React state doesn't work, it doesn't rerender components

reactjs

react-hooks