如何在反应选择中设置默认值？

Question

这是表单的视图

我像这样从 API 返回数据，然后将其设置为名为 listData 的状态， 我想如果标签已被选中，那么标签被禁用并且无法在每个索引数组中重新选择，我希望默认值被禁用，因为它会根据 API 的反馈进行调整，条件是什么？

这是我的初始状态

const [listData, setListData] = useState([])
const [menuName, setMenuName] = useState([])
const [listFoodMenu, setListFoodMenu] = useState([])
const [listAccomodation, setListAccomodation] = useState([])
const [roomName, setRoomName] = useState([])

这是我的列表数据

[
    {
        "id": 1,
        "package": {
            "packageId": 100,
            "priceTypeName": "Full Day"
        },
        "food": [
            {
                "foodId": 11,
                "foodName": "Breakfeast",
                "quantity": 10
            },
            {
                "foodId": 12,
                "foodName": "Lunch",
                "quantity": 100
            },
        ],
        "accomodation": [
            {
                "accId": 22,
                "accomodationTypeName": "Double Bed",
                "quantity": 43
            },
             {
                "accId": 23,
                "accomodationTypeName": "Single Bed",
                "quantity": 76
            }
        ]
    },
    {
        "id": 2,
        "package": {
            "packageId": 101,
            "priceTypeName": "1 Night"
        },
        "food": [
            {
                "foodId": 13,
                "foodName": "Coffe Break",
                "quantity": 102
            },
            {
                "foodId": 14,
                "foodName": "Dinner",
                "quantity": 115
            },
            {
                "foodId": 11,
                "foodName": "Breakfeast",
                "quantity": 10
            },
        ],
        "accomodation": [
            {
                "accId": 32,
                "accomodationTypeName": "Double Bed",
                "quantity": 53
            },
             {
                "accId": 33,
                "accomodationTypeName": "Single Bed",
                "quantity": 86
            }
        ]
    }
]

然后我有一个食物菜单列表，我将它设置为一个名为 listFoodMenu 的状态，该列表将用作 react select 中的列表

这是我的 listFoodMenu

[
    {
        foodId: 11,
        label: "Breakfeast"
    },
    {
        foodId: 12,
        label: "Lunch"
    },
    {
        foodId: 13,
        label: "Coffe Break"
    },
    {
        foodId: 14,
        label: "Dinner"
    },
    {
        foodId: 14,
        label: "Dinner"
    },
    {
        foodId: 15,
        label: "Cocktail"
    },
    {
        foodId: 16,
        label: "Supper"
    }
]

这是onSelectMenu的函数

const onSelectMenu = (indexItem, indexFood) => event => {
   let { foodId, label, isDisabled } = event
   let data = [...listData]

   setMenuName(
      [...menuName, {
        label: label,
        foodId: foodId,
        isDisabled: true
      }]
    )

   setListFoodSelect(
      [...listFoodSelect, {
        label: label,
        isDisabled: true
      }]
    )

   //This is the process of entering foodId into the state listData according to the index array
    data[indexItem] = {
      ...data[indexItem],
      food: [...data[indexItem].food.map((item, idx) => {
        if (idx === indexFood) {
          return {
            ...item,
            foodId: foodId,
            foodName: label
          }
        }
        return item
      })]
    }
    
    setListData(data)

}

这是我的反应选择组件

{listData.map((response, indexItem) => (
    {response.food.map((item, indexFood) => 
        <Select
           onChange={onSelectMenu(indexItem, indexFood)}
           options={listFoodMenu}
           rules={{ required: 'Please select an Menu' }}
           value={menuName.label}
           placeholder='Select Menus'
           isOptionDisabled={(option) => option.isDisabled}
           defaultValue={{ value: item.foodId, label: item.foodName !== '' ? item.foodName : null }}
        />
    )}
)}

这些是附加和前置表单的函数

const _appendForm = (
    indexItem,
    type
  ) => event => {
    let data = [...listData]

    if (type === 'food') {
      data[indexItem] = {
        ...data[indexItem],
        food: [...data[indexItem].food, {
          isPackageIncluded: 1,
          tempRfpScheduleFoodId: '',
          tempRfpId: '',
          foodId: null,
          quantity: null
        }]
      }
      return setListData(data)
    } else {
      data[indexItem] = {
        ...data[indexItem],
        accomodation: [...data[indexItem].accomodation, {
          isPackageIncluded: 1,
          tempRfpScheduleAccomodationId: '',
          accomodationTypeId: null,
          quantity: null
        }]
      }
      return setListData(data)
    }
  }

注意：这是一个表格，表格里有菜单“食物”和“住宿”可以加减，如果加了表格就选择listFoodMenu，显示的选项只会包含没有的列表被选中