Question

您好，我正在制作一个排序系统，它从数据库中获取值并使用加减按钮显示它们，添加时它需要传递值名称以进行测试，但出于某种原因，每次 DOM 都会呈现它们重新渲染。

这是当前页面的当前代码。

import React, { useState, useEffect } from "react";
import { Button, Row, Col } from "react-bootstrap";
import Axios from "axios";

export default function Waiter() {
  const [visibility, setVisibility] = React.useState("hidden");
  const [responseData, setResponseData] = useState([]);
  const [tableNo, setTableNo] = useState("");
  const [errVisibility, setErrVisibility] = useState("hidden");
  const order = [
    { name: "pizza", amount: "5", price: 15.0, table: "15" },
    { name: "burger", amount: "3", price: 12.0, table: "15" },
  ];
  let id = 0;

  // fetches data
  async function fetchData() {
    try {
      await Axios.get("http://localhost:3001/getfood")
        .then((response) => {
          setResponseData(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    } finally {
      console.log("Fetched Data");
    }
  }

  function NewOrder() {
    if (tableNo === "") {
      setErrVisibility("visible");
    } else {
      setVisibility("visible");
      setErrVisibility("hidden");
      fetchData();
    }
  }

  function add(val) {
    console.log(val);
  }

  function Cancel() {
    setVisibility("hidden");
    document.getElementById("tableNo").value = "";
    setTableNo("");
  }

  React.useEffect(() => {
    document.getElementById("information").style.visibility = visibility;
    document.getElementById("cancel").style.visibility = visibility;
    document.getElementById("order").style.visibility = visibility;
  }, [visibility]);

  useEffect(() => {
    document.getElementById("inputErr").style.visibility = errVisibility;
  }, [errVisibility]);
  return (
    <>
      <div>
        <Button id="newOrder" onClick={NewOrder}>
          Initiate New Order
        </Button>
        <label>Table No.</label>
        <input
          type="text"
          id="tableNo"
          onChange={(event) => {
            setTableNo(event.target.value);
          }}
        ></input>
        <p id="inputErr">No table number added</p>
      </div>

      <Row>
        <Col md={6} xs={2}>
          <div id="information">
            {responseData.map((val) => {
              id += 1;
              return (
                <div key={id.toString()}>
                  <div id="data">
                    <p>
                      Item: {val.item} Price: {val.price}
                      <button id="add" onClick={add("val")}>
                        add
                      </button>
                      <button id="remove">remove</button>
                      <p id="amount"></p>
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </Col>
        <Col md={6} xs={2}>
          <div id="order">
            {order.map((item) => {
              id += 1;
              return (
                <div {...id.toString()}>
                  <p>
                    Item: {item.name} Amount: {item.amount} Price: {item.price}
                  </p>
                </div>
              );
            })}
          </div>
        </Col>
      </Row>

      <Button id="cancel" onClick={Cancel}>
        Cancel
      </Button>
    </>
  );
}

这是我浏览器控制台的输出：

[Log] Fetched Data (main.chunk.js, line 1920)
[Log] undefined (main.92a481a2dd269378825e.hot-update.js, line 75, x4)
[Log] val (main.e73dbee36bf80f92817f.hot-update.js, line 74, x4)
[Log] val (main.e73dbee36bf80f92817f.hot-update.js, line 74, x8)

Answer 1

您需要调用如下函数：-

<button id="add" onClick={() => add(val)}>
  add
</button>

通过 REACT 中的按钮传递信息

1 个答案: