更改反应状态时如何从数组中检索特定的对象列表？

如何解决更改反应状态时如何从数组中检索特定的对象列表？

我有一个这样的数组。

我想在选择包装名称时获取所有实际尺寸，并且在从列表中选择一个实际尺寸时，应该根据每个实际尺寸检索订单尺寸。我怎样才能做到这一点？

const [packing,setPacking] = useState([])
const [sizes,seSizes] = useState([])

更改包装名称

const onChangeMaterialName = async (id,setFieldValue) => {
    const { data } = await axios.get(`/packingDetails/${id}`)
    console.log('data',data.sizes)
    setFieldValue('actualSize',data.sizes) //here I want to fix
  }

更改实际尺寸

  const onChangeMaterialActualSize = (e,setFieldValue,values) => {
    // setFieldValue('orderSize',data.sizes[0]) //I want fix
  }

这是我的组件

• 设置包装名称

                              <Grid
                               item
                               className={classes.flex}
                               md={3}
                               sm={12}
                               xs={12}
                             >
                               <FormControl
                                 fullWidth
                                 variant='outlined'
                                 size='small'
                               >
                                 <Autocomplete
                                   onChange={(event,newValue) => {
                                     if (newValue) {
                                       onChangeMaterialName(
                                         newValue.id,setFieldValue
                                       )
                                       setFieldValue(
                                         'packingName',newValue.packingName
                                       )
                                     }
                                   }}
                                   options={packing}
                                   size='small'
                                   getoptionLabel={(option) => option.name}
                                   renderInput={(params) => (
                                     <TextF
                                       {...params}
                                       label='Name'
                                       variant='outlined'
                                     />
                                   )}
                                 />
                               </FormControl>
                             </Grid>
  

• 设置实际尺寸

                         <Grid
                           item
                           className={classes.flex}
                           md={3}
                           sm={12}
                           xs={12}
                         >
                           <FormControl
                             fullWidth
                             variant='outlined'
                             size='small'
                           >
                             <InputLabel id='demo-simple-select-label'>
                               Actual Size
                             </InputLabel>
                             <Select
                               size='small'
                               onChange={(e) => {
                                 onChangeMaterialActualSize(
                                   e,values
                                 )
                               }}
                               onBlur={handleBlur}
                               value={values.actualSize}
                               fullWidth
                               labelId='demo-simple-select-outlined-label'
                               id='demo-simple-select-outlined'
                               label='Actual Size'
                               name='actualSize'
                             >
                               {sizes.map((e,i) => (
                                 <MenuItem value={e} key={e.id}>
                                   {e.actualSize}
                                 </MenuItem>
                               ))}
                             </Select>
                           </FormControl>
                         </Grid>
  

• 设置订单大小

                         <Grid item xs={12} sm={12} md={3}>
                           <Field
                             name='orderSize'
                             size='small'
                             label='Order Size'
                             component={TextField}
                             variant='outlined'
                             disabled
                             fullWidth
                           ></Field>
                         </Grid>
  

解决方法

用 -

更新 onChangeMaterialActualSize

const onChangeMaterialActualSize = (e) => {
 const name = e.target.name; // it'll return 'actualSize'
 const value = e.target.value; //it'll return selected id
 // now you can perform any operation like storing value in state using setState
}

和带有 -

的 Select 组件

<Select
 ...
 name='actualSize'
 onChange={onChangeMaterialActualSize}
 ...
>
 {sizes.map(size => (
 <MenuItem value={size.id} key={size.id}>
  {size.actualSize}
 </MenuItem>
 ))}
</Select>

此外，我认为您应该在从 API 获取数据后将数据列表存储在不同的变量中，以便在不同的变量中呈现和存储输入组件（如 AutoComplete 和 Select）的值。>