UPDATE MUI数据网格，只有一个元素添加了一个元素

Question

const [tableData, setTableData] = useState(props.tableData);

useEffect(() => {
    setTableData(props.tableData);
  }, [props.tableData]);

return (<div key="tradingTableGrid" style={{ height: 450, width: "100%" }}>
          <DataGrid
            key={"TradingTable"}
            rows={Object.values(tableData)}
            columns={tableHead}
            rowHeight={30}
            pageSize={10}
            onRowClick={(row) => openModal(row)}
          />
</div>);

加载初始数据并调用WebSocket的组件如下（我只添加了基本代码）：

const [data, setData] = useState({});
const [loadData, setLoadData] = useState(false);
const [socketActive, setSocketActive] = useState(false);

// initial data loading from api
const handleResponse = (response) => {
  var result = {};
  response.forEach((prop) => {
    result = {
      ...result,
      [prop.order_id]: {
        id: prop.order_id,
        orderId: prop.order_id,
        price: prop.price.toString(),
        volume: prop.max_amount_currency_to_trade,
        minVolume: prop.min_amount_currency_to_trade,
        buyVolume: prop.max_volume_currency_to_pay + " €",
        minBuyVolume: prop.min_volume_currency_to_pay + " €",
        user: prop.trading_partner_information.username,
      },
    };
  });
  setData(result);
};

// add from websocket
const addOrder = (order) => {
  if (
    order.trading_pair === "btceur" &&
    order.order_type === "buy" &&
    (order.payment_option === "1" || order.payment_option === "3")
  ) {
    if (typeof data[order.order_id] === "undefined") {
      console.log(data);
      setData({
        ...data,
        [order.order_id]: {
          id: order.order_id,
          orderId: order.order_id,
          price: order.price.toString(),
          volume: order.amount,
          minVolume: order.min_amount,
          buyVolume: Number(order.volume).toFixed(2) + " €",
          minBuyVolume: Number(order.min_amount * order.price).toFixed(2) + " €",
          user: "not set through socket",
        },
      });
    }
  }
};

useEffect(() => {
  const loadData = () => {
    setLoadData(true);
    axios
      .get(process.env.REACT_APP_BITCOIN_SERVICE + "/order/book?type=buy")
      .then((response) => handleResponse(response.data.orders))
      .catch((exception) => console.error(exception))
      .finally(() => setLoadData(false));
  };

  if (Object.keys(data).length === 0 && socketActive === false) {
    loadData();
  }

  const socket = () => {
    const websocket = io("https://ws-mig.bitcoin.de:443/market", {
      path: "/socket.io/1",
    });
    websocket.on("connect", function () {
      setSocketActive(true);
    });
    websocket.on("remove_order", function (order) {
      removeOrder(order);
    });
    websocket.on("add_order", function (order) {
      addOrder(order);
    });

    websocket.on("disconnect", function () {
      setSocketActive(false);
    });
  };

  if (socketActive === false && Object.keys(data).length !== 0) {
    socket();
  }
}, [data, socketActive]);

return (
  <Table
    tableHeaderColor="info"
    tableHead={tableHead}
    tableData={data}
    type="buy"
  />
);

没有任何人知道为什么在插座上的更新中只添加了数据中的一个元素，并且在下一个呼叫中覆盖了每个元素？

问题

Answer 1

作为一个示例，您可以在特定数据值的上下文中创建该函数，当您调用时，它将始终将初始状态用于数据。 （要了解为什么看到JavaScript关闭如何工作？

解决方案

您可以做的是使用功能更新语法，该语法使您可以将函数传递给setData：

addOrder

这确保始终使用最后一个存储的值。 请参阅usestate上的react文档功能更新