react基础问题，应该是基础问题？

Question

目前有一段react代码表单，其中一个表单项“使用模型”是可以增加多个子选项，并且是下拉组件。问题是增加多个之后，比如5个，然后再第二个下拉组件进行选择之后，字选项总数量就变成了2个。

import React, { useState } from 'react';
import type { FC } from 'react';
import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
import { message, Upload } from 'antd';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormUploadDragger,
  ProFormSelect,
} from '@ant-design/pro-components';
import { uploadFileApi } from '../service';
import _ from 'lodash';

interface ModelItem {
  key: number;
  value: string;
}

interface AddTagParsingModalProps {
  visible: boolean;
  onCancel?: () => void;
  onOk?: (formData: FormData) => void;
  loading?: boolean;
}

const modelOptions = [
  { label: '模型A', value: 'A' },
  { label: '模型B', value: 'B' },
  // ... 其他选项
];

const AddTagParsingModal: FC<AddTagParsingModalProps> = ({
  visible,
  onCancel,
  onOk,
  loading = false,
}) => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [fileUrl, setFileUrl] = useState<string>('');
  const [fileError, setFileError] = useState<string>('');
  const [models, setModels] = useState<ModelItem[]>([{ key: Date.now(), value: '' }]);

  // 文件校验
  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    const isExcel =
      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
      file.type === 'application/vnd.ms-excel';
    if (!isExcel) {
      setFileError('只支持上传Excel文件');
      message.error('只支持上传Excel文件');
      return Upload.LIST_IGNORE;
    }
    setFileError('');
    return true;
  };

  // 文件上传变更
  const handleFileChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    uploadFileApi(fileList[0].originFileObj as File).then((res: any) => {
      setFileList(newFileList);
      setFileUrl(res.data.url);
    }).catch((err: any) => {
      setFileError(err.message);
    });
  };

  // 增加模型
  const addModel = (idx: number) => {
    // if (models.length >= 5) return;
    // const newModel = { key: Date.now(), value: '' };
    // setModels([...models.slice(0, idx), newModel, ...models.slice(idx)]);
    // console.log(models)
    setModels([...models, { key: Date.now(), value: '' }]);
  };

  // 删除模型
  const removeModel = (key: number) => {
    if (models.length === 1) return;
    setModels(models.filter((item) => item.key !== key));
  };

  // 修复bug：模型输入变更时，正确更新对应项的value
  const handleModelChange = (idx: number, value: string) => {
    // const tempModel = _.cloneDeep(models);
    // tempModel[idx].value = value;
    setModels(models);
    // console.log(models)
  };

  // 提交
  const handleFinish = async () => {
    if (fileList.length === 0) {
      setFileError('请上传文件');
      message.error('请上传文件');
      return false;
    }
    if (fileError) {
      message.error(fileError);
      return false;
    }
    // 校验所有模型都已选择
    if (models.some(item => !item.value)) {
      message.error('请为每个模型选择一个选项');
      return false;
    }
    const formData = new FormData();
    formData.append('file', fileUrl);
    formData.append('models', JSON.stringify(models.map((item) => item.value)));
    if (onOk) {
      onOk(formData);
    }
    return true;
  };

  // 关闭
  const handleModalCancel = () => {
    setFileList([]);
    setFileError('');
    setModels([{ key: Date.now(), value: '' }]);
    if (onCancel) onCancel();
  };

  return (
    <ModalForm
      title="新建标签解析"
      visible={visible}
      width={500}
      modalProps={{
        confirmLoading: loading,
        destroyOnClose: true,
        maskClosable: false,
        okText: '确定',
        cancelText: '关闭',
      }}
      onFinish={handleFinish}
      onVisibleChange={(open) => {
        if (!open) handleModalCancel();
      }}
      submitter={{
        searchConfig: {
          submitText: '确定',
          resetText: '关闭',
        },
        resetButtonProps: {
          onClick: (e: any) => {
            e.preventDefault();
            handleModalCancel();
          },
        },
      }}
      preserve={false}
    >
      <ProFormUploadDragger
        name="dragger"
        label="上传文件"
        max={1}
        description="只能上传xlsx文件"
        fieldProps={{
          fileList,
          beforeUpload,
          onChange: handleFileChange,
          accept: '.xlsx',
        }}

        required
        rules={[
          {
            validator: async () => {
              if (fileList.length === 0) {
                throw new Error('请上传文件');
              }
              if (fileError) {
                throw new Error(fileError);
              }
            },
          },
        ]}
        extra={fileError}
      />
      {JSON.stringify(models)}
      <ProForm.Item
        label="使用模型"
        required
        style={{ marginBottom: 0 }}
      >
        {models.map((item, idx) => (
          <div key={item.key} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            <div style={{ flex: 1 }}>
              <ProFormSelect
                style={{ width: '300px' }}
                placeholder={`请选择模型${models.length > 1 ? `（${idx + 1}）` : ''}`}
                fieldProps={{
                  value: item.value,
                  onChange: (value) => handleModelChange(idx, value),
                  style: { width: '100%' },
                  allowClear: true,
                }}
                options={modelOptions}
                // name属性不再影响models的数量
                name={undefined}
                rules={[{ required: true, message: '请选择模型' }]}
                noStyle
              />
            </div>
            <PlusCircleOutlined
              className="dynamic-add-button"
              onClick={() => addModel(idx + 1)}
              style={{
                marginLeft: 8,
                color: models.length >= 5 ? 'gray' : 'red',
                fontSize: 16,
                verticalAlign: 'middle',
                pointerEvents: models.length >= 5 ? 'none' : 'auto'
              }}
            />
            <MinusCircleOutlined
              className="dynamic-delete-button"
              style={{
                marginLeft: 8,
                color: models.length === 1 ? 'gray' : 'red',
                pointerEvents: models.length === 1 ? 'none' : 'auto',
                fontSize: 16,
                verticalAlign: 'middle',
              }}
              onClick={() => {
                removeModel(item.key);
              }}
            />
          </div>
        ))}
      </ProForm.Item>
    </ModalForm>
  );
};

export default AddTagParsingModal;

Answer 1

我看了下你的代码在 handleModelChange 函数中写的是：

const handleModelChange = (idx: number, value: string) => {
  setModels(models);
};

这行代码并没有更新 models 中对应项的 value，只是把原来的 models 重新设置了一遍，没有任何变化。这就导致 React 没有检测到状态变化，或者状态被错误地重置。

需要在 handleModelChange 中 正确地更新指定索引的模型项的值。可以这样写：

const handleModelChange = (idx: number, value: string) => {
  const updatedModels = [...models];
  updatedModels[idx].value = value;
  setModels(updatedModels);
};

或者使用 map 更函数式一点：

const handleModelChange = (idx: number, value: string) => {
  setModels(models.map((item, index) =>
    index === idx ? { ...item, value } : item
  ));
};