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

Question

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

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

tags: ['Offbeat', 'sculpture']

CreatableSelect将选项作为这样的对象数组，再加上更多的对象：

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

选项数据作为字符串数组引入，我将它们转换为像上面这样的对象数组，作为CreatableSelect的选项。

我正在为文档进行编辑，希望看到所选的数组项，预先填充表单上的输入，以便用户可以添加或删除选项。我试过使用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之间，前者给了我正在寻找的输出，但为了使表单动态，我尝试创建预选选项的变量，以放置到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([])

默认的状态是一个空数组，它是一个真实的值，它应该设置为一个falsey值，否则它将在任何数据输入之前在加载时触发一个呈现：

const [defaultMultiSelect, setDefaultMultiSelect] = useState(null)