如何通过多个元素的键来更新其状态？

Question

我正在尝试提交一个有4个表单字段的表单。

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

我做了一个定制的钩子，useAddChapterForm。

最初的状态是：

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

我希望在单一状态下更新所有这些元素的状态，并且使用了这种方法。

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

但我想以不同的方式处理chapterImages的变化。我的钩子看起来是这样的。

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,
  };
};

我想设置chapterImages的值，当onChangeImageHandler有变化时，所以我也可以删除图像。

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

​

​

有一个打字稿错误。那么，如何用key chapterData.chapterImages来更改setState的状态？

按照建议的答案更新了这个问题：

  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}>
    ...

我正在使用这组件上传图像。

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>
  );
};

​

​

Answer 1

这行不必使用计算属性名称

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

您可以像这样使用这个setter函数

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