javascript - 如何更改在 React 中作为状态传递的对象内的数组项值?
问题描述
我有一个 React 应用程序,我所有的组件都可以正常工作,并且我正在使用useState
hook 来管理状态。我将状态作为单个对象传递,如下所示:
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
,它给出了一个 sintax 错误: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;
解决方案
你应该先计算你的状态然后更新它
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
});
}
};
推荐阅读
- sql-server - BCP 为有效日期格式抛出“无效字符值”?
- sql - 尝试使用 Databricks 和 SQL 创建表并将数据加载到同一个表中
- python - 如何修复对 Twilio 的 python POST 请求上的“不支持的媒体类型”错误
- android - 替换后如何回到第一个Android Fragment
- css - 如何使用 Create React App 解决关键的 css?
- c++ - 为什么我会收到“从 'Queue*/Stack*' 到 'int' 的无效转换”错误消息?
- azure-service-fabric - Service Fabric 负载均衡器未正确转发流量
- java - 如何使用另一个类中的布尔方法来检查字符串参数?
- php - 为什么我不能在这个 mysql 表中存储带有重音字符的字符串?
- python - 如何从压缩文件夹中加载 jinja2 模板