javascript - React 传递 props 无法读取未定义的属性

Question

我正在尝试将 props Candidate_information 从我的父组件传递到我的子组件。到目前为止，我能够通过它，尽管我遇到了“无法读取未定义的属性“id””的问题。属性 id 确实存在并且已定义候选人信息。尽管当我 console.log(this.props.candidate_information )在我的子渲染中，它首先记录未定义，然后记录带有属性 id 的给定数据，而 this.props.candidate_inforation.id 未定义。为什么会这样以及如何解决这个问题？最终我希望能够使用它。我 child 的三元语句中的 props.candidate_information.id。

父代码

class Stage1Page extends Component {
    handleChange = (candidate) => {
    this.setState({
        showProfile: true,
        spotlightCandidate: candidate,
    });
    this.retrieveCandidateInfo(candidate);
};
// retrieves candidate info
retrieveCandidateInfo = (candidate) => {
    const access_token = JSON.parse(localStorage['appState']).user
        .access_token;

    // Hard code token for the time being
    const config = {
        headers: {
            Authorization: 'Bearer ' + access_token,
        },
    };

    axios
        .get(
            'https://reactreactexample.com/api/v1/candidate/' +
                candidate.id,
            config
        )

        .then((response) => {
            // handle success
            console.log(response.data);
            this.setState({ candidate_information: response.data });
        })
        .catch((error) => {
            if (error.response) {
                // The request was made and the server responded with a status code
                // that falls out of the range of 2xx
                alert('error');
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log(error.request);
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log('Error', error.message);
            }
            console.log(error.config);
        });
};


    render() {

    return (
        <div className='candidates-page'>
            <CreateCandidate
                onClose={this.showCreate}
                show={this.state.show}
            />
            <CandidateProfile
                onClose={this.showCandidateProfile}
                show={this.state.showProfile}
                spotlightCandidate={this.state.spotlightCandidate}
                candidate_information={this.state.candidate_information}
            />
            <SearchBar handleSearch={this.searchUpdate} />
            <Header />
            <div className='candidate-list-container'>
                    <DataTable
                        theme='solarized'
                        customStyles={customStyles}
                        noHeader={true}
                        fixedHeader={true}
                        columns={columns}
                        data={dataTable}
                        onRowClicked={this.handleChange}
                        pagination={true}
                        responsive={true}
                    />
                </div>
       </div>
     )}

子代码

render() {
    if (!this.props.show) {
        return null;
    }

    console.log(this.props.candidate_information.id);

    return (
        <div className='candidate-profile'>
            <div className='directory'>
                <div className='background' />
                <div className='box'>

                    {this.props.candidate_information === undefined ? (
                        <div>SUCCESS</div>
                    ) : (
                        <div>FAIL</div>
                    )}
                </div>
            </div>
       </div>
)}

Answer 1

这是因为您的组件第一次渲染 candidate_information 时未设置，因为异步查询尚未返回:

   .then((response) => {
        // handle success
        console.log(response.data);
        this.setState({ candidate_information: response.data });
    })

2个解决方案:

首先，在设置candidate_information之前不要渲染您的 child 。为此，请检查父级是否已通过。如果未定义，则您的 HTTP 请求一定尚未返回，因此还不是显示该组件的时候。

render() {
if (this.props.candidate_information === undefined || !this.props.show) {
    return null;
}

其次，您可以在父级中执行此操作(如果请求尚未返回您的候选人信息，请将 show 设置为 false):

   <CandidateProfile
            onClose={this.showCandidateProfile}
            show={this.state.showProfile && this.state.candidate_information}
            spotlightCandidate={this.state.spotlightCandidate}
            candidate_information={this.state.candidate_information}
        />