React-select Async Multi-select：如何設置默認選擇值？

Question

如何設置React-select Async Multi-select默認選擇值？

這是我使用react-hook-form form react-select的表單：

<form onSubmit={handleSubmit(onSubmit)} >

    {updateError && renderError(updateError)}
    {/*{updateSuccess && renderError(updateSuccess)}*/}

    <div>

        {/*|-------------------------------------------------------------------------- */}
        {/*| Input : Recipient(s) */}
        {/*|-------------------------------------------------------------------------- */}

        <label className="c-label-block">Thread Readers:</label>

        <Controller
            name="recipients"
            control={control}
            rules={{ required: true }}
            render={({ field }) => (

                <AsyncSelect
                    {...field}
                    isMulti
                    isClearable
                    defaultOptions={[{ label: 'Default4', value: 7 }]}
                    cacheOptions
                    placeholder={"Select Users"}
                    value
                    loadOptions={loadOptions}
                    // onChange={handleChange} 
                    onInputChange={handleInputChange}
                    className={"react-select-wrapper c-fullwidth"}
                    classNamePrefix={"react-select"}
                    // styles={customStyles}
                    instanceId="thread-readers-select" 
                />

            )}
        />

    </div>

    <div role="button" className="c-btn-group c-btn c-btn-primary c-btn--medium" onClick={handleSubmit(onSubmit)}>
        <div tabIndex={0}>Save Changes</div>
    </div>

</form>

Answer 1

像這樣：

<AsyncSelect
  isMulti
  cacheOptions
  loadOptions={promiseOptions}
  value={yourArray.map((item) => {
    return {
      value: item.value,
      label: item.label,
    };
  })}
/>