计算器应用handleexpression函数异常及清除按钮、Key警告问题求助

问题概况 #

• handleexpression 函数未按预期工作：点击清除按钮后，界面仍残留首个输入的数字/运算符
• 已为按钮设置唯一key，却仍收到React的"每个子元素需有唯一key"警告

问题1：handleexpression 函数逻辑错误 #

问题根源 #

1. 直接修改传入的state对象（如state.expression += value）违反React状态不可变原则，无法触发组件正确更新
2. 在number和operator分支中，返回的状态未包含更新后的expression，导致组件state里的表达式始终未同步
3. 清除操作中，冗余调用handleexpression且逻辑冲突，进一步造成状态混乱

修复代码 #

修改handleexpression函数（calculator.js）

改为返回新的表达式字符串，不再直接修改state：

const handleexpression = (value, state) => {
  if (!value) {
    return "";
  }
  return `${state.expression}${value}`;
};

更新calculator函数的分支逻辑（calculator.js）

确保返回的状态包含更新后的expression：

const calculator = (type, value, state) => {
  switch (type) {
    case "number":
      const newNumExp = handleexpression(value, state);
      return {
        ...handleNumber(value, state),
        expression: newNumExp
      };

    case "operator":
      const newOpExp = handleexpression(value, state);
      return {
        ...state,
        operator: value,
        previousValue: state.currentValue,
        expression: newOpExp
      };

    case "equal":
      const result = handleEqual(state);
      // 可根据需求调整expression，比如保留计算式结果
      return {
        ...result,
        // expression: `${state.expression}=${result.currentValue}`
      };

    case "clear":
      return initialState; // 直接返回初始状态，无需额外处理
  }
};

问题2：React key警告 #

问题根源 #

外层btnslist.map生成的<Row>组件未设置唯一key，只有内层按钮加了key，React要求所有循环生成的元素都必须具备唯一标识。

修复代码（index.js） #

给外层循环的<Row>添加key，使用索引加前缀确保唯一性：

{
  this.btnslist.map((btns, index) => (
    <Row key={`calc-row-${index}`}>
      {btns.map((btn) => (
        Number.isInteger(btn) || btn === '.' ?
          <Button key={`btn-${btn}`} text={`${btn}`} onPress={() => this.handleTap("number", btn)} />
          :
          <Button key={`btn-${btn}`} text={`${btn}`} theme="accent" onPress={() => this.handleTap("operator", `${btn}`)} />
      ))}
    </Row>
  ))
}

内容的提问来源于stack exchange，提问作者LuciferStix