Reactjs Button组件不更新压力上的状态

Question

*更新

任何按钮都不会更新我的状态。如何将按在button.js上的值作为handleChange上的条件传递？

1. 希望在单击按钮组件时使用回调更新状态值
2. 在另一个组件中显示结果
3. 当我按下按钮时，我的状态不会更新。

App.js

  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);
  // const [all, setAll] = useState(0);

  const handleChange = (value) => {
    // const data = ["good", "bad", "neutral"];
    if (value === "good") {
      setGood(good + 1);
      console.log(value);
    } else if (value === "neutral") {
      setNeutral(neutral + 1);
    } else if (value === "bad") {
      setBad(bad + 1);
    }
  };
Return (
    <Container className="Container">
      <h2>Give Feedback</h2>
      <Button onClick={handleChange} />
      {/* statictics  */}
      <Statistics />
    </Container>
  );
}

Button.js

export default function Button(props) {
  return (
    <div>
      <button value="good" onChange={props.handleChange}>
        Good
      </button>
      <button value="neutral" onClick={props.handleChange}>
        Neutral
      </button>
      <button value="bad" onClick={props.handleChange}>
        Bad
      </button>
    </div>
  );
}

收到新的错误，建议我添加一个生命周期方法。我不知道这是否过分，是否有更简单的方法来实现这个计数解决方案。

更改后收到的错误

Answer 1

乍一看，您的代码有几个问题：

• 在button组件中，您正在寻找props.handleChange；但是在您的App组件中，您正在传递onClick；您应该执行<Button handleChange={handleChange} />或在Button组件中执行onClick={props.onClick} (我个人更喜欢后者)
• React需要您用第一个大写字母命名组件，因此button -> Button
• 在您的handleChange函数中，您期望value进来，但是您将收到单击事件，您应该从中提取值。

Answer 2

在Button compoennt中，道具是handleChange，所以您需要如下所示

对于您的情况，App.js中的更改：

import React, { useState } from "react";
import "./styles.css";
import Button from "./Button";

export default function App() {
  const [good, setGood] = useState(0);
  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);

  const handleChange = value => {
    // const data = ["good", "bad", "neutral"];
    if (value === "good") {
      setGood(good);
      console.log(value);
    } else if (value === "neutral") {
      setNeutral(neutral);
      console.log(value);
    } else if (value === "bad") {
      setBad(bad);
      console.log(value);
    }
  };

  return (
    <div>
      <h2>Give Feedback</h2>
      <Button handleChange={handleChange} />
      {/* statictics  */}
    </div>
  );
}

更新后的情况下按钮组件的更改

 import React from "react";
// import { Button, Table, Container } from "react-bootstrap";

export default function Button(props) {
  return (
    <div>
      <button value="good" onClick={() => props.handleChange("good")}>
        Good
      </button>
      <button value="neutral" onClick={() => props.handleChange("neutral")}>
        Neutral
      </button>
      <button value="bad" onClick={() => props.handleChange("bad")}>
        Bad
      </button>
    </div>
  );
}