On the problem of initialValue, the Multiselector of Antd Form and Select

problem description

look at the official documentation and directly set defaultValue= {["a10", "c12"]} to Select < / br > but I can"t get the correct effect after combining form"s initialValue . The contents of the initialValue are displayed, but the contents of the corresponding Option are not displayed. The reason is that the data of the Option option comes from another interface, and initialValue is already in effect before rendering. Is there any way to solve it? You can"t just set the this.props.form.setFiledValue sense.
do you have any ideas to solve the problem? Thank you

the environmental background of the problems and what methods you have tried

initialValue rendered first, but the data of Options has not yet been obtained, which leads to the direct display of username . However, we hope to be able to judge the value after Option rendering, so as to render "${item.realname} ${item.nickname}"

of Option.

:ownersAsListownersList

Thank you!

Antdesign react.js

Dec.18,2021

you try to change the rendering method of variable assignment. I have been walking in this way

 
        const selectList= ownersList.map((item, index) => {
                    <Option key={index} value={item.username}>{`${item.realname}(${item.nickname})`}</Option>
                )}
            
<FormItem {...formItemLayout} label="">
    {getFieldDecorator('ownersAsList', {
        rules: [{
            required: true,
            message: ''
        }],
        initialValue: ownersAsList || []
    })(
        <Select
            mode="multiple"
            placeholder=""  
            onSearch={this.handleSearch}                              
        >
           {selectList}
        </Select>
    )}
</FormItem>

now that form,Option 's value is used, it is not necessary to use

Previous: Arcgis js 3.9 was successfully deployed offline, but the page map never appeared

Next: I built a lua-rectangle using luarocks and successfully uploaded it to luarocks, but the installation failed. How to solve this problem?

Can an array in react state be bound to a dom state using an element in the array?
setting in state: this.state = {checkList: []}; checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount}); checkSavaCount is the same length as the following JsonPage. the following creates...

Create-react-app antdesign react.js

Feb.26,2021
How to cancel the page change or refresh of react Antd Design table checkbox
use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...

Antdesign react.js javascript

Feb.26,2021
React Daily questions the use of, antd select components
official example of full copy: this is the official sample code: import { Select } from antd ; const Option = Select.Option; function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <div> <Select defaul...

Antdesign react.js

Feb.26,2021
When I changed the antd version, I mistakenly reported 'Divider' is not defined.
Test antd document Form in the demo code const {getFieldDecorator} = this.props.form; reported an error, found that their antd version is too low, so npm install antd@beta-save installed the latest version of antd, but my project Divider reported that th...

Create-react-app antdesign react.js

Feb.27,2021
The novice asks whether the settings in state in react can be added in a non-manual way.
:this.state={key1:value1,key2:value2}, :this.state={key1:value1,key2:value2,key3:value3} statekey3:value3, this.statepush(),this.state.push(key3,value3) this.state={key1:value1,key2:value2,key3:value3} this.statepush() this.state ...

Create-react-app antdesign react.js

Feb.28,2021
Multiple selection of ant design drop-down box has no effect
use the drop-down box of React s ant design, and ask for help on how to solve the problem according to the fact that there is no multiple selection in the doc, on the official website. <Select multiple showSearch onSelect={(val,e) =&g...

Antdesign react.js javascript

Feb.28,2021
An error occurred when antd submitted multiple forms on a single page
data problems occur when multiple forms are submitted on a single page. For example, when I submit the second form, the console prints the contents of the first form. Is there any way to modify this? ...

Antdesign react.js

Mar.02,2021
React uses the switch component in the table of ant design, but the switch data is not updated?
use the original table component to encapsulate an extra layer of TableC, in the render method of the columns property to render switch, circularly. No matter how you modify the data view, it will not be updated, including using mobx, to ask how to solv...

Mobx antdesign react.js

Mar.04,2021
How to modify the top of the Antd Transfer shuttle box.
how to modify the top of the Antd Transfer shuttle box like this ...

Javascript antd antdesign react.js

Mar.05,2021
There is a conflict between the names tooltip and antd tooltip on bizcharts when a page of the ant design pro project is used.
if you want to use Tooltip in antd on the same page, you also need to use Tooltip to make a chart. There is a conflict between Tooltip. I want to change the name of one of the Tooltip. Ladies and Gods, what should I do with this ? ...

Antdesign react.js dva.js

Mar.07,2021
Ant-design Select component, how to display placeholder? when value is empty
<Select labelInValue value={{key:this.state.boxTypeId,label:this.state.boxType}} getPopupContainer={() => document.getElementById( boxType )} placeholder="" style={{width: 100% }} onChange={e=>this.handleSelectChange( boxType ...

Antdesign react.js

Mar.07,2021
The default field of the component used by react cannot pass a value.
Development environment: react antd I wrote a new component myself < ModelItem > put it in modelSetting and then I wrote it like this keygetModelDataAgain keykey22key22 Why, even if key is the default field, can t I overwrite it? Obviously p...

Antdesign react.js

Mar.10,2021
The onChange event of the input box, the input value can not be less than 0.01and not more than 10000, there is a prompt for input errors (errors can not be prompted frequently)?
the above is the problem, and the bottom is written by yourself, but the prompt error will operate frequently ...

Antdesign react.js

Mar.10,2021
Modal embedded forms are used in react antd, but the child DOM inside modal cannot be fetched by using ref
first is a parent component that contains a modal import React from react ; import { Button, Input, Table, Modal } from antd ; import ApplyCertificateForm from . components apply-certificate-form ; import UploadCertificateFrom from . compon...

Antdesign react.js

Mar.10,2021
On the Recursive problem of Tree structure
the following is the interface simulation data. I need to perform different logic when the user clicks according to different parent nodes, that is, through recursion, the user clicks on any tree node, how to know the current layer node for example, i...

Javascript antdesign react.js

Mar.10,2021
Change the theme color to ant design and report an error.
the directory I created with create-react-app, and then follow the steps of the official website to modify the color lessstyle,true ...

Antdesign react.js

Mar.11,2021
After the creat-react-app project is deployed with serve-s, how to re-build the project if you want to update it.
as I described above, for the first time, my creat-react-app project has no problem after it has been deployed with serve-s. the files under the build generated by the second, npm run build, I re-enter and deploy with the serve-s command, but when I op...

Npm antdesign react.js create-react-app

Mar.12,2021
React's burying point plan?
the current project needs to add buried point statistics system to the official account project, but after query, it is found that there is no mature solution for React. an unelegant react burying system ...

Bury-some antdesign react.js

Mar.13,2021
How do the background fields in antdesgin correspond to multiple select selected values one by one?
select how to match the background fields with the selected state of select. my operation is to splice the value. Is there a simple way < Select style= {{width: 120}} onChange= {this.handleselect.bind (this)} > { ...

Antdesign react.js

Mar.14,2021
React+antd project runs under ie11: the TypeError: object does not support the "startsWith" property or method
as shown in the figure below, my project is the scaffolding of create-react-app. There is no problem running under ie 9. Running under ie 11 reported the following error. I went to Baidu, and some people said that I did not quote babel-polyfill, so npm...

Antdesign react.js create-react-app

Mar.14,2021