如何更改在 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;
  }
}