React中对象类型颜色输入值无法更新的问题求助

我一眼就看出问题出在哪了——你现在的onColorChange函数直接把整个colorVal状态替换成了单个输入框的值，这就导致原本的对象被覆盖成字符串，后续所有颜色输入框自然没法正确读取值了。咱们一步步来修复：

问题根源分析 #

你的初始colorVal是一个对象（比如{ highlightBackground: '#F7EBC6', ... }），但当你调用setColorVal(e.target.value)时，你把整个状态改成了输入框的字符串值（比如#FF0000）。这时候再打印colorVal，它已经不是原来的对象了，变成了单个字符串，所以所有颜色输入框的value={colorVal[color]}都会变成undefined，更新自然无效。

而你测试的单个随机输入框能正常工作，是因为它的状态本身就是单个字符串，替换逻辑是对的，但你的多颜色场景需要维护对象结构。

修复步骤 #

1. 修改onColorChange，支持更新对象中的指定属性 #

我们需要让回调函数知道当前更新的是哪个颜色key，所以要给onColorChange传入对应的颜色名称，然后返回一个新的对象（保持React状态的不可变性）：

const onColorChange = (colorKey) => (e) => {
  setColorVal(prev => ({
    ...prev, // 复制原来的所有属性
    [colorKey]: e.target.value // 更新指定的颜色值
  }));
};

2. 在渲染时给每个ColorPicker传递对应的颜色key #

在map循环里，把当前的color（也就是颜色属性名，比如highlightBackground）传给onColorChange：

<ColorPicker 
  key={color} 
  label={color} 
  value={colorVal[color]} 
  onChange={onColorChange(color)} // 这里传入colorKey
/>

3. 确认ColorPicker组件的回调正确触发 #

你的ColorPicker组件里的输入框已经正确绑定了onChange={props.onColorChange}，这部分不需要改，因为现在props.onColorChange是我们上面返回的带参数的函数，能正确处理当前输入框的变化。

修改后的完整ColorPickerSection组件代码 #

import React, { useState } from 'react'
import ColorPicker from './ColorPicker';
import { colorSelect, colorNames, colors } from '../Theme/colorSections'
import styled from 'styled-components';

function ColorPickerSection() {
 const [colorVal, setColorVal] = useState(colors);

 // 改成带参数的回调，针对指定颜色key更新
 const onColorChange = (colorKey) => (e) => {
  setColorVal(prevState => ({
    ...prevState,
    [colorKey]: e.target.value
  }));
 };

 console.log(colorVal); // 现在打印的应该还是对象，每个属性会正确更新

 return (
  <div>
   {Object.keys(colorSelect).map(groupName => {
    return (
     <div key={groupName}> {/* 别忘了给外层div加key */}
      <GroupName>{groupName}</GroupName>
      {Object.keys(colorSelect[groupName]).map(color => {
       return (
        <ColorPicker 
         key={color} 
         label={color} 
         value={colorVal[color]} 
         onChange={onColorChange(color)} 
        />
       )
      })}
     </div>
    )
   })}
  </div>
 )
}

额外提示 #

• 别忘了给map循环生成的外层div加上key属性（我上面已经加上了），避免React的警告。
• React状态更新要遵循不可变性，所以我们用扩展运算符...prevState复制原来的对象，再修改指定属性，而不是直接修改原对象。

这样修改后，每个颜色输入框的变化都会正确更新colorVal对象中对应的属性，你再打印colorVal就会看到对应的颜色值被更新，而不是整个对象变成字符串啦！

内容的提问来源于stack exchange，提问作者Dave.Q