React-select无法读取未定义的属性值

Question

我正在尝试实现'react-select'，但出现'TypeError：无法读取未定义的属性'value''。我正在使用react和react挂钩。尽管演示用法使用了类组件，但在这种情况下，我还是使用了功能组件。我在做什么错，我该如何解决？

job_req_titles是带有标题标签：和值：]的对象数组。>

https://github.com/JedWatson/react-select

import React, { useState } from 'react';
import Select from 'react-select';

export default function CandidateForm({ handleCreate, job_req_titles }) {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [phone, setPhone] = useState('');
    const [facebook, setFacebook] = useState('');
    const [github, setGithub] = useState('');
    const [linkedin, setLinkedin] = useState('');
    const [jobTitle, setJobTitle] = useState('');
    const [company, setCompany] = useState('');
    const [appJobReq, setAppJobReq] = useState('');

    const prepareCandidateObj = () => {
        // Prepare the candidate object
        let candidate = {
            name,
            email,
            phone,
            facebook,
            github,
            linkedin,
            jobTitle,
            company,
            appJobReq,
        };

        console.log(candidate);

        // Pass in the postNewCandidate from the parent component
        // to be called in this component
        handleCreate(candidate);
        // alert('Candidate Submitted!');
    };

    return (
        <div className='container'>
            <div className='row'>
                <label className='name'>Name</label>
            </div>
            <div className='row'>
                <input
                    className='name-input'
                    type='text'
                    placeholder='Carol Caroller'
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
            </div>
            <div className='row'>
                <label className='email'>Email</label>
            </div>
            <div className='row'>
                <input
                    className='email-input'
                    placeholder='[email protected]'
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
            </div>
            <div className='row'>
                <label className='phone'>Phone</label>
            </div>
            <div className='row'>
                <input
                    className='phone-input'
                    placeholder='[phone]'
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                />
            </div>
            <div className='row'>
                <label className='facebook'>Facebook</label>
            </div>
            <div className='row'>
                <input
                    className='facebook-input'
                    placeholder='https://www.facebook.com/DilaonRion/'
                    value={facebook}
                    onChange={(e) => setFacebook(e.target.value)}
                ></input>
            </div>
            <div className='row'>
                <label className='linkedin'>Linkedin</label>
            </div>
            <div className='row'>
                <input
                    className='linkedin-input'
                    placeholder='https://www.linkedin.com/DillonRion/'
                    value={linkedin}
                    onChange={(e) => setLinkedin(e.target.value)}
                ></input>
            </div>
            <div className='row'>
                <label className='github'>Github</label>
            </div>
            <div className='row'>
                <input
                    className='github-input'
                    placeholder='https://www.github.com/DilonRion/'
                    value={github}
                    onChange={(e) => setGithub(e.target.value)}
                ></input>
            </div>
            <div className='row'>
                <label className='job-title'>Job Title</label>
            </div>
            <div className='row'>
                <input
                    className='job-title-input'
                    type='text'
                    placeholder='Frontend Developer'
                    value={jobTitle}
                    onChange={(e) => setJobTitle(e.target.value)}
                ></input>
            </div>
            <div className='row'>
                <label className='current-company'>Current Company Name</label>
            </div>
            <div className='row'>
                <input
                    className='current-company-input'
                    type='text'
                    placeholder='Obrien LLC'
                    value={company}
                    onChange={(e) => setCompany(e.target.value)}
                ></input>
            </div>
            <div className='row'>
                <label className='job-req'>Applicant Job Req</label>
            </div>
            <div className='row'>


                <div className='job-req-input'>
                    <Select
                        className='job-req-select'
                        value={appJobReq}
                        onChange={(e) => setAppJobReq(e.target.value)}
                        options={job_req_titles}
                        isMulti
                    />
                </div>

            </div>
            {/* <div className='row'>
                <label className='cv'>CV</label>
            </div> */}
            <div className='row'>
                <label className='applied'>Applied or Sourced</label>
                <select className='applied-input'>
                    <option disabled defaultValue>
                        --
                    </option>
                    <option value='1'>Applied</option>
                    <option value='0'>Sourced</option>
                </select>
            </div>
            <button className='create-button' onClick={prepareCandidateObj}>
                Create
            </button>
        </div>
    );
}

我正在尝试实现'react-select'，但出现'TypeError：无法读取未定义的属性'value''。我正在使用react和react挂钩。尽管演示用法使用类组件，但我是...

Answer 1

添加此内容可修复错误。