Ant select如何访问key的值答案

【问题标题】：How to access the key's value of Ant selectAnt select如何访问key的值
【发布时间】：2020-05-09 23:34:35
【问题描述】：

我需要获取所选item 的item ID，在我的情况下，用户输入输入并从数组形式的API 中获取结果，该数组形式迭代<Option>，如下所示。

<Select
    mode="multiple"
    style={{ width: '100%' }}
    placeholder="Select Invoices"
    defaultValue={[]}
    onChange={handle_select_invoices}
    optionLabelProp="label"
    onSearch={search_invoice_by_number}
    >
    {
    invoices.map((el,index) => {
        return <Option key={el.invoice_id} value={el.invoice_number}></Option>
    })
    }
</Select>

当用户选择一个选项时，handle_select_invoices 被触发。它需要两个参数value 和key。

const handle_select_invoices =(value,key) => {
    console.log(' ************** IDS ****************')
    console.log(key)
}

function search_invoice_by_number(value) {
    var data={'invoice_number':value};
    axios.post('http://localhost:4000/get_invoice_by_number',data).then(
        response => {

            if(response.data.length > 0){
                set_invoices(response.data);
            }else{
                set_invoices([]);
            }
        },error =>{
            Swal.fire({
                title: 'Error!',
                text: 'Please Contact your software developer',
                icon: 'error',
                confirmButtonText: 'OK'
            })
        }
    )
}

问题

当用户选择多个项目时，console.log 会显示一个空的 Json 元素，并且仅填充数组中的最后一个元素。

导致这个结果的代码有什么问题？

【问题讨论】：

您的代码看起来不错，并且在代码和框中运行良好。在这里查看：codesandbox.io/s/pedantic-carson-xwydd?file=/src/App.js。还有什么你可能做错了吗？您是否尝试过删除结束 </Option> 标记并执行 <Option key={el.invoice_id} value={el.invoice_number} />
@UzairRiaz 我发现了问题所在。但不知道如何解决。发生这种情况是因为invoices 数组从API 获取其值，因此当我选择一个选项而不是搜索另一个选项时。 invoices 数组正在获取新的数组值。我不知道你是否可以这样测试。
你能分享search_invoice_by_number的功能吗？我可能会尝试使用虚拟数据创建您的场景。
我在我的项目中做的是加载完整的数据，onSearch 我在前端过滤它。如果您的数据太大，您可能必须手动清空新数据中不再存在的选定选项。
@UzairRiaz 是的，数据太大，我不能让浏览器进行过滤。我更新了问题

标签： javascript reactjs antd multi-select

【解决方案1】：

好吧，我想我明白你的意思了。这是我建议你这样做的方法。使用状态变量来跟踪selectedValues。在选择onChange 中，只需将它们设置为handleChange = values => setSelectedValues(values) 之类的状态。在搜索中，从 API 获取新数据后，过滤selectedValues，如下所示：

set_invoices(response.data);
const values = selectedValues.filter(value => 
    data.map(i => i.invoice_number).includes(value)
);
setSelectedValues(values); // filter out the values that do not exist in the new data

您的选择将包含一个额外的道具value={selectedValues}。

这是一个带有一些虚拟数据的工作示例：https://codesandbox.io/s/pedantic-carson-xwydd?file=/src/App.js:699-805

【讨论】：

是的，这是最好的方法