React中如何通过key更新多字段state指定属性并解决TS报错

我正在尝试提交一个包含4个表单字段的表单，首先定义的表单数据类型如下：

export type ChapterData = {
  chapterNumber: number;
  volumeNumber?: number;
  chapterName?: string;
  chapterImages: ImageListType;
};

我编写了自定义Hook useAddChapterForm 来管理表单状态，初始状态定义：

const initialState: ChapterData = {
  chapterNumber: 0,
  volumeNumber: 0,
  chapterName: '',
  chapterImages: [],
};

最初我打算用单个state管理所有字段，实现如下：

const [chapterData, setChapterData] = useState<ChapterData>(initialState);
const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
  setChapterData({ ...chapterData, [e.target.name]: e.target.value });
};

由于chapterImages字段需要单独的图片上传处理逻辑，我调整了Hook的初始实现：

export const useAddChapterForm = () => {
  const [chapterData, setChapterData] = useState<ChapterData>(initialState);
  const [images, setImages] = useState([]);
  const maxNumber = 69;

  const onChangeImageHandler = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
    console.log(imageList, addUpdateIndex);
    setImages(imageList as never[]);
    setChapterData({ ...chapterData, [chapterData.chapterImages]: imageList });
  };

  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setChapterData({ ...chapterData, [e.target.name]: e.target.value });
  };

  return {
    chapterData,
    maxNumber,
    changeHandler,
    images,
    onChangeImageHandler,
  };
};

我需要在onChangeImageHandler触发时更新chapterImages的值，支持图片删除操作，但下面这行代码触发了Typescript报错：

setChapterData({ ...chapterData, [chapterData.chapterImages]: imageList });

我按照建议把更新图片的代码改成了直接指定key的写法：

const onChangeImageHandler = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
  console.log(imageList, addUpdateIndex);
  setImages(imageList as never[]);
  setChapterData({ ...chapterData, chapterImages: imageList });
};

const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
  setChapterData({ ...chapterData, [e.target.name]: e.target.value });
};

表单提交逻辑如下：

const { chapterData, changeHandler } = useAddChapterForm();
const handleSubmit = (e: FormEvent) => {
  e.preventDefault();
  console.log(chapterData);
};
return (
  <form onSubmit={handleSubmit}>
  ...

图片上传功能基于react-images-uploading组件实现，图片上传字段组件代码：

export const ImageUploadField: FunctionComponent<ImageUploadFieldProps> = (
  props: ImageUploadFieldProps
) => {
  const { error } = props;
  const { images, onChangeImageHandler, maxNumber } = useAddChapterForm();
  return (
    <FieldWrapper label={'Select cover image'} errorMessage={error}>
      <ImageUploading multiple value={images} onChange={onChangeImageHandler} maxNumber={maxNumber}>
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps,
        }) => (
          <div className="outline-dashed outline-2 outline-offset-2">
            {imageList.length === 0 && (
              <button
                className="w-full text-center"
                style={isDragging ? { color: 'red' } : undefined}
                onClick={onImageUpload}
                {...dragProps}
              >
                Click or Drop here
              </button>
            )}
            <div className="flex flex-col justify-center">
              {imageList.length > 0 && (
                <div className="px-2 py-1 rounded bg-red-500 flex">
                  <button className=" space-x-2 w-full" onClick={onImageRemoveAll}>
                    Remove all images
                  </button>
                  <XCircle />
                </div>
              )}
              <div className="flex flex-wrap">
                {imageList.map((image, index) => (
                  <div key={index} className="flex">
                    <div className="flex flex-col p-2">
                      <Image
                        src={image.dataURL as string}
                        alt={image.file?.name}
                        width={150}
                        height={200}
                        quality={65}
                        className="rounded-tl rounded-bl"
                      />
                      <p>{image.file?.name}</p>
                      <div className="flex space-x-4">
                        <div className="flex px-2 py-1 rounded bg-green-500 space-x-2">
                          <button onClick={() => onImageUpdate(index)}>Update</button>
                          <PencilEdit />
                        </div>
                        <div className="flex px-2 py-1 rounded bg-red-500 space-x-2">
                          <button onClick={() => onImageRemove(index)}>Remove</button>
                          <XCircle />
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </ImageUploading>
    </FieldWrapper>
  );
};

一共两个核心问题：

1. 最初的TS报错是写法错误：[chapterData.chapterImages]是把当前state里chapterImages的实际值当对象key用，而不是用固定的字段名chapterImages。初始状态下chapterImages是空数组，转成对象key会变成空字符串，完全不符合ChapterData的类型定义，自然报TS错。直接写成固定键值对chapterImages: imageList就能解决这个语法问题。

2. 改完写法后提交拿不到图片数据，是因为重复调用自定义Hook导致状态隔离：

   • 外层表单组件调用一次useAddChapterForm()，生成一套独立的状态
   • 内部ImageUploadField组件又调用一次useAddChapterForm()，生成另一套完全独立的状态
     图片上传时更新的是上传组件内部那套状态，和外层表单提交时读的状态根本不是同一个，自然拿不到图片数据。

具体修复步骤 #

• 删掉ImageUploadField内部对useAddChapterForm的调用，把组件需要的images、onChangeImageHandler、maxNumber全部改成从父组件接收props，保证整个表单共用同一个Hook实例的状态。
• 建议更新状态时用函数式写法，避免闭包拿到旧state值导致更新异常：

const onChangeImageHandler = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
  setImages(imageList as never[]);
  setChapterData(prev => ({ ...prev, chapterImages: imageList }));
};

const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  setChapterData(prev => ({ ...prev, [name]: value }));
};

• 额外优化：Hook里单独存的images和chapterData.chapterImages是完全重复的数据，可以删掉独立的images状态，直接用chapterData.chapterImages传给上传组件，避免两份状态不同步的隐患。

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