无法将多选合并到反应箭头功能中答案

【问题标题】：Unable to incorporate multiselect in a react arrow function无法将多选合并到反应箭头功能中
【发布时间】：2022-08-19 00:23:14
【问题描述】：

我在尝试将 <Select/> 标签添加到我的反应网页时遇到问题。我最初有一个 <input/> 字段，但我想将其更改为只有一定数量项目的 Select 字段。我从这个包含对象列表的数组中提取，因为当我使用相同的 <Select/> 标记时，它需要它要显示为对象的所有项目：

// Array to hold the 17 options of SDG\'s
export const SDGOptions = [
    { value: \'\', label: \'Any\'},
    { value: \'SDG 1: No Poverty\', label: \'SDG 1: No Poverty\'},
    { value: \'SDG 2: Zero Hunger\', label: \'SDG 2: Zero Hunger\'},
    { value: \'SDG 3: Good Health & Well Being\', label: \'SDG 3: Good Health & Well Being\'},
    { value: \'SDG 4: Quality Education\', label: \'SDG 4: Quality Education\'},
    { value: \'SDG 5: Gender Equality\', label: \'SDG 5: Gender Equality\'},
    { value: \'SDG 6: Clean Water & Sanitation\', label: \'SDG 6: Clean Water & Sanitation\'},
    { value: \'SDG 7: Affordable & Clean Energy\', label: \'SDG 7: Affordable & Clean Energy\'},
    { value: \'SDG 8: Decent Work & Economic Growth\', label: \'SDG 8: Decent Work & Economic Growth\'},
    { value: \'SDG 9: Industry, Innovation, & Infrastructure\', label: \'SDG 9: Industry, Innovation, & Infrastructure\'},
    { value: \'SDG 10: Reduced Inequalities\', label: \'SDG 10: Reduced Inequalities\'},
    { value: \'SDG 11: Sustainable Cities & Communities\', label: \'SDG 11: Sustainable Cities & Communities\'},
    { value: \'SDG 12: Responsible Consumption & Production\', label: \'SDG 12: Responsible Consumption & Production\'},
    { value: \'SDG 13: Climate Action\', label: \'SDG 13: Climate Action\'},
    { value: \'SDG 14: Life Below Water\', label: \'SDG 14: Life Below Water\'},
    { value: \'SDG 15: Life On Land\', label: \'SDG 15: Life On Land\'},
    { value: \'SDG 16: Peace, Justice, & Strong Institutions\', label: \'SDG 16: Peace, Justice, & Strong Institutions\'},
    { value: \'SDG 17: Partnerships for the Goals\', label: \'SDG 17: Partnerships for the Goals\'},
]

当我单击下拉列表时，一切都很好，但是当我尝试单击某些内容以选择它时，出现此错误：

Uncaught TypeError: Cannot read properties of undefined (reading \'value\')
    at onChange (ProjectAdminForm.js:92:1)

这是我的代码：

import { useState } from \"react\";
import { SDGOptions } from \"../FilterComponents/CategoryArrays/SdgOptions\";
import Multiselect from \"multiselect-react-dropdown\"
import Select from \'react-select\';

const ProjectAdminForm = () => {
    // Adding basic info
    const [sdg, setSDG] = useState(\'\')

    const handleSubmit = async (e) => {
        e.preventDefault() // Prevents refresh of page from happening
        console.log(\'button clicked\')

        const project = {sdg}
        console.log(project)
             
        // Sending form response to backend
        const response = await fetch(\'/api/projects\', {
            method: \'POST\',
            body: JSON.stringify(project),
            headers: {
                \'Content-Type\': \'application/json\'
            }
        })
        const json = await response.json
        

        // Checking for error
        if (!response.ok) {
            setError(json.error)
        }
        if (response.ok) {
            // Reset form inputs back to empty string
            setSDG(\'\')
            
            alert(\'Project added!\')
            console.log(\'new project added\', json)
        }
    }

    return (
        <form className=\"create project-form\" onSubmit={handleSubmit}>
            <h2 style={{\"textAlign\": \"center\"}}>Add a New Project</h2>

            <hr></hr>

            <label>Sustainable Development Goal:</label>
            {/* <input 
                type=\"text\"
                placeholder=\"e.g. SDG 2: Zero Hunger\"
                onChange={(e) => setSDG(e.target.value)}
                value={sdg}
                required
            /> */}
            <Select
                className=\"basic-single\"
                classNamePrefix=\"select\"
                placeholder=\"Select\"
                name=\"color\"
                onChange={(e) => setSDG(e.target.value)}
                options={SDGOptions}   
            />

            
            
            <div className=\"add-proj\">
                <button>Add Project</button>
            </div>
            
            {error && <div className=\"error\">{error}</div>}
        </form>
    )
}

export default ProjectAdminForm

当我能够让它在 React 类组件中工作时，我真的不明白为什么它不能在这里工作。有谁知道我为什么会收到这个错误？

onChange={(e) => setSDG(e.value)} 在 <Select.../> 上尝试此操作，在 Select onChange 中返回您选择的对象，如果它是 multiSelect = true，那么它将返回对象数组而不是事件。

标签： reactjs

【解决方案1】：

您使用的不是 HTML 选择，而是一个名为 react-select 的库。 react-select 库中的 onChange 函数返回您选择的对象。

您可以进行以下更改以使其正常工作。

<Select
  className="basic-single"
  classNamePrefix="select"
  placeholder="Select"
  name="color"
  onChange={(selection) => setSDG(selection.value)}
/>

不同的库有不同的 API 集。通常最好阅读他们的API documentation 以获得更清晰的信息。

【讨论】：