react 联级选择器插入数据 实现最终渲染和提交

react + ant desgin

实现效果如下 : 选中设备问题或其他问题 , 展示不同数据



后台数据 : 



解决思路 : 用深浅拷贝定义插入数据的函数 , 更新数据

 

  const [options, setOptions] = useState([
    {
      value: '设备问题',
      label: '设备问题',
      children: []
    },
    {
      value: '其他问题',
      label: '其他问题',
      children: []
    }
  ])

  const [options1, setOptions1] = useState([])  // 存储res1
  const [options2, setOptions2] = useState([])  // 存储res2


  const init = async obj => {
    const res = await getList1()
    const res1 = await getList2({ ...obj, repairType: 1 })
    const res2 = await getList2({ ...obj, repairType: 2 })
    setOptions1(res1)
    setOptions2(res2)
}


// 根据res1和res2的变化实时更新
useEffect(() => {
    // 假设您在某个时机获取了res1和res2数据
    const updatedOptionsForDevices = updateOptions(
      options,
      '设备问题',
      options1
    )
    const updatedOptionsForOthers = updateOptions(
      updatedOptionsForDevices,
      '其他问题',
      options2
    ) // 基于前一次更新的结果继续更新
    console.log('updatedOptionsForOthers', updatedOptionsForOthers)

    setOptions(updatedOptionsForOthers)
  }, [options1, options2]) // 当res1或res2改变时触发更新


// 插入函数
  function updateOptions (options, targetValue, newData) {
    // 深拷贝options以避免直接修改原数组
    const newOptions = JSON.parse(JSON.stringify(options))

    // 查找目标分类并插入数据
    newOptions.forEach(option => {
      if (option.value === targetValue && option.children) {
        // 将新数据转换为所需格式，并进行去重处理后插入
        const newDataFormatted = newData
          .map(item => ({
            value: item.repairTypeId.toString(),
            label: item.typeName
          }))
          .filter(newItem => {
            // 确保新项不在现有的children中
            return !option.children.some(
              existingItem => existingItem.value === newItem.value
            )
          })

        option.children.push(...newDataFormatted)
      } else if (option.children) {
        // 递归处理子选项，同时传递已去重的新数据
        updateOptions(option.children, targetValue, newData)
      }
    })

    return newOptions
  }


  <Form   form={form} >
             <Form.Item
                  colon={false}
                  label='设备类型'
                  name='repairTypeId'
                  rules={[{ required: true, message: '请选择登录有效期' }]}
                >
                  <Cascader
                    onChange={value => {
                      setSelectedCon3(value)
                      form.setFieldsValue({ repairTypeId: value })
                    }}
                    allowClear
                    showSearch
                    placeholder='请输入设备类型'
                    style={{ width: 600, height: 40 }}
                    options={options}
                  />
                </Form.Item>
</Form>