在ReactJS中将类组件转换为功能组件

问题描述

可以将整个代码转换为基于功能的组件代码吗？下面的代码完全基于类组件。我想将其转换为功能组件，但由于我是React的新手，每次功能组件出现错误时，请有人将其更改为功能组件（整个代码）

import React,{ Component,useState } from "react";
import "./Burger.css";
class Burger extends Component {
  state = {          `State that is to be used in entire program`
    salad: 0,chicken: 0,cheese: 0,tomato: 0,};
  addRemoveIngredient = (action,ingredient) => {   `Method`
    let { salad,chicken,cheese,tomato } = this.state;
    let stateValue;
    switch (ingredient) {
      case "salad": {
        stateValue = salad;
        break;
      }
      case "chicken": {
        stateValue = chicken;
        break;
      }
      case "cheese": {
        stateValue = cheese;
        break;
      }
      case "tomato": {
        stateValue = tomato;
        break;
      }
      default:
        break;
    }
    if (action === "add") {
      stateValue = stateValue + 1;
    } else {
      stateValue = stateValue - 1;
    }
    this.setState({
      [ingredient]: stateValue >= 0 ? stateValue : 0,});
  };
  burgerContent = () => {
    let { salad,tomato } = this.state;
    let burger = [];
    for (let i = 0; i < salad; i++) {
      burger.push(<div key={burger.length} className="Salad"></div>);
    }
    for (let i = 0; i < chicken; i++) {
      burger.push(<div key={burger.length} className="Chicken"></div>);
    }
    for (let i = 0; i < cheese; i++) {
      burger.push(<div key={burger.length} className="Cheese"></div>);
    }
    for (let i = 0; i < tomato; i++) {
      burger.push(<div key={burger.length} className="Tomato"></div>);
    }
    return burger;
  };
  render() {
    return (
      <>
        <div className="Burger">
          <div className="burgerTop"></div>
          {this.burgerContent()}
          <div className="burgerBottom"></div>
        </div>
        <div className="Controls">
          <p>Salad</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add","salad")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove","salad")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Chicken</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add","chicken")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove","chicken")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Cheese</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add","cheese")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove","cheese")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Tomato</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add","tomato")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove","tomato")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
        </div>
      </>
    );
  }
}
export default Burger;

解决方法

您在这里...

import React,{ Component,useState } from "react";
import "./Burger.css";
export default function Burger() {
  const [stateValues,setStateValues] = useState({
    salad: 0,chicken: 0,cheese: 0,tomato: 0
  });

  const addRemoveIngredient = (action,ingredient) => {
    let { salad,chicken,cheese,tomato } = stateValues;
    let stateValue;
    switch (ingredient) {
      case "salad": {
        stateValue = salad;
        break;
      }
      case "chicken": {
        stateValue = chicken;
        break;
      }
      case "cheese": {
        stateValue = cheese;
        break;
      }
      case "tomato": {
        stateValue = tomato;
        break;
      }
      default:
        break;
    }
    if (action === "add") {
      stateValue = stateValue + 1;
    } else {
      stateValue = stateValue - 1;
    }
    setStateValues({
      ...stateValues,[ingredient]: stateValue >= 0 ? stateValue : 0
    });
  };

  const burgerContent = () => {
    let { salad,tomato } = stateValues;
    let burger = [];
    for (let i = 0; i < salad; i++) {
      burger.push(<div key={burger.length} className="Salad"></div>);
    }
    for (let i = 0; i < chicken; i++) {
      burger.push(<div key={burger.length} className="Chicken"></div>);
    }
    for (let i = 0; i < cheese; i++) {
      burger.push(<div key={burger.length} className="Cheese"></div>);
    }
    for (let i = 0; i < tomato; i++) {
      burger.push(<div key={burger.length} className="Tomato"></div>);
    }
    return burger;
  };
  return (
    <>
      <div className="Burger">
        <div className="burgerTop"></div>
        {this.burgerContent()}
        <div className="burgerBottom"></div>
      </div>
      <div className="Controls">
        <p>Salad</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add","salad")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove","salad")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Chicken</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add","chicken")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove","chicken")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Cheese</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add","cheese")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove","cheese")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Tomato</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add","tomato")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove","tomato")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
      </div>
    </>
  );
}