制作和编辑表单 - 如何在 CreatableSelect 中设置默认输入值 (React-select)

Question

我正在为 API 文档制作编辑表单。其中两个输入是 select 类型，其中一个是可以有多个输入的 CreatableSelect。当我引入文档并将其设置为存储时的状态时，我不确定如何预填充此类输入以允许用户引用和编辑。数据存储为字符串数组，但 CreatableSelect 的选项存储为具有标签和值的对象。

传入文档存储可创建的多 select 数据，如下所示：

tags: ['Offbeat', 'sculpture']

CreatableSelect 将选项作为对象数组接收，如下所示还有更多：

{label: 'Offbeat', value: 'Offbeat'}
{label: 'sculpture', value: 'sculpture'}

选项数据作为字符串数组引入，我将它们转换为对象数组，如上所示，作为 CreatableSelect 的选项。

我正在为文档创建一个编辑路径，并希望看到 selected 数组项预填充表单上的输入，以便用户可以添加或删除选项。我尝试使用 defaultValue <CreatableSelect>

的道具

<Form.Group className='mb-2'>
      <Form.Label htmlFor='tags'>Edit/Add Tags?</Form.Label>
      {defaultMultiSelect && <CreatableSelect
        isClearable
        isMulti
        options={allTagsStructured}
        onChange={(value) => handleMultiCreateChange('tags', value)}
        defaultValue={[{label: 'sculpture', value: 'sculpture'}, {label: 'offbeat', value: 'offbeat'}]}
        defaultInputValue={'art'}
      />}

在 defaultValue 和 defaultInputValue 之间，前者给了我正在寻找的输出，但为了使表单动态化，我试图创建一个预 selected 选项的变量以放入 defaultValue 道具

const [defaultMultiSelect, setDefaultMultiSelect] = useState([])
const [defaultTypeSelect, setDefaultTypeSelect] = useState([])

useEffect(() => {
    const getData = async () => {
      console.log(id)
      try {
        const { data } = await axios.get(`/api/pins/${id}`)
        console.log(data)
        setFormData(data)
        handleIncomingtags(data.tags)
        handleIncomingType(data.typeOfPlace)
      } catch (error) {
        console.log(error)
      }
    }
    getData()
  }, [id])

  const handleIncomingtags = (tags) => {
    const selectOptions = []
    tags.map(tag => {
      const obj = {}
      obj.label = tag
      obj.value = tag
      return selectOptions.push(obj)
    })
    setDefaultMultiSelect(selectOptions)
    console.log(selectOptions)
    console.log(defaultMultiSelect)
  }

  const handleIncomingType = (type) => {
    const selectOptions = []
    type.map(oneType => {
      const obj = {}
      obj.label = oneType
      obj.value = oneType
      return selectOptions.push(obj)
    })
    setDefaultTypeSelect(selectOptions)
    console.log(defaultTypeSelect)
  }

这会保存我想要在 select 输入中的文档选项数组：

[{label: 'Bar', value: 'Bar'}, {label: 'Gaming', value: 'Gaming'}, {label: 'Social', value: 'Social'}]

Answer 1

const [defaultMultiSelect, setDefaultMultiSelect] = useState([])

状态的默认值是一个空数组，它是一个真值，它应该被设置为一个假值，否则它会在任何数据进来之前触发加载渲染：

const [defaultMultiSelect, setDefaultMultiSelect] = useState(null)

制作和编辑表单 - 如何在 CreatableSelect 中设置默认输入值 (React-select)

Making and edit form - How set default input values in a CreatableSelect (React-select)

javascript

reactjs

react-select