如何更改在 React 中作為狀態傳遞的對象內的數組項值？

Question

我有一個 React 應用程序，我的所有組件都可以運行，並且我正在使用useState鈎子來管理狀態。 我將狀態作為單個對象傳遞，如下所示：

const initialState = {
  displayValue: "0",
  values: [0, 0],
  current: 0,
  operation: null,
  shouldClearDisplay: false,
};

const [state, setState] = useState({ ...initialState });

我可以更改displayValue的狀態，如下所示：

setState({...state, displayValue: "0"})

問題是當我嘗試更改values 。 我想要做的是：

const addDigit = (digit) => {
  if (state.shouldClearDisplay) {
    setState({ ...state, values[current]: displayValue , displayValue: digit, shouldClearDisplay: false });
      return;
    }

但是當我嘗試執行此values[current]: displayValue ，它給出了values[current]: displayValue錯誤： SyntaxError: /path/to/component/Calculator.jsx: Unexpected token, expected "," (22:33) 。 似乎我無法以這種方式更新對象內數組的值。

我怎樣才能做到這一點？

編輯 01：

下面是Calculator.jsx的全部內容：

import React, { useState } from "react";
import CalcButton from "./CalcButton";
import Display from "./Display";

const Calculator = (props) => {
  const initialState = {
    displayValue: "0",
    values: [0, 0],
    current: 0,
    operation: null,
    shouldClearDisplay: false,
  };

  const [state, setState] = useState({ ...initialState });

  const resetState = () => {
    setState({ ...initialState });
  };

  const addDigit = (digit) => {
    if (state.shouldClearDisplay) {
      setState({ ...state, values[state.current]: displayValue , displayValue: digit, shouldClearDisplay: false });
      return;
    }

    if (state.displayValue === "0") {
      setState({ ...state, displayValue: digit });
      return;
    }

    if (digit === "0" && state.displayValue === "0") {
      return;
    }

    setState({ ...state, displayValue: state.displayValue + digit });
  };

  const setOperation = (op) => {
    setState({ ...state, shouldClearDisplay: true, operation: op });
  };

  const c = {
    lightGray: "#d7d9ce",
    darkGray: "#8e9aa4",
    orange: "#fc7536",
    black: "#010f14",
  };

  return (
    <React.Fragment>
      <Display bgColor={c.black} value={state.displayValue} />
      <div className="d-flex">
        <CalcButton
          text="AC"
          width="180px"
          passedOnClick={resetState}
          bgColor={c.lightGray}
        />
        <CalcButton text="÷" passedOnClick={setOperation} bgColor={c.orange} />
      </div>
      <div className="d-flex">
        <CalcButton text="7" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="8" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="9" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="X" passedOnClick={setOperation} bgColor={c.orange} />
      </div>
      <div className="d-flex">
        <CalcButton text="4" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="5" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="6" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="-" passedOnClick={setOperation} bgColor={c.orange} />
      </div>
      <div className="d-flex">
        <CalcButton text="1" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="2" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="3" passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="+" passedOnClick={setOperation} bgColor={c.orange} />
      </div>
      <div className="d-flex">
        <CalcButton
          text="0"
          passedOnClick={addDigit}
          width="120px"
          bgColor={c.lightGray}
        />
        <CalcButton text="." passedOnClick={addDigit} bgColor={c.lightGray} />
        <CalcButton text="=" passedOnClick={setOperation} bgColor={c.orange} />
      </div>
    </React.Fragment>
  );
};

export default Calculator;

Answer 1

你應該先計算你的狀態然后更新它

  const [state, setState] = useState(initialState);

  const addDigit = (digit) => {
    if (state.shouldClearDisplay) {
      let temp = [...state.values];
      temp[state.current] = state.displayValue;
      setState({
        ...state,
        values: temp,
        displayValue: digit,
        shouldClearDisplay: false
      });
    }
  };

Answer 2

創建一個新數組，其中current索引處的元素為displayValue 。 然后將此數組分配給values 。

一個簡單的例子是這樣的

const addDigit = (digit) => {
  if (state.shouldClearDisplay) {
    setState({
      ...state,
      values: state.values.map((v,i) => i===state.current ? displayValue : v),
      displayValue: digit,
      shouldClearDisplay: false
    });
    return;
  }
}