React-select 無法讀取未定義的屬性值

Question

我正在嘗試實現“react-select”，但出現“TypeError：無法讀取未定義的屬性“值”。 我正在使用 react 和 react 鈎子。 雖然演示使用使用 class 組件，但在這種情況下，我使用的是 function 組件。 我做錯了什么，我該如何解決？

job_req_titles 是一個 object 數組，標題為 label: 和值：

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='example@email.com'
                    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='(201) 534 2233'
                    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>
    );
}

Answer 1

添加這個修復了錯誤。

const handleChange = (selectedOption) => {
    setAppJobReq(selectedOption);
    console.log(`Option selected:`, selectedOption);
};

            <div className='job-req-input'>
                <Select
                    className='job-req-select'
                    value={appJobReq}
                    onChange={handleChange}
                    options={job_req_titles}
                    isMulti
                    classNamePrefix='select'
                />
            </div>