将 props 从父级传递给子级在 React 中返回 undefined

Question

I am learning React and I am building a simple app to experiment with props. I have an input field that searches the database based on the user input and I want to display the results in a different component that loads after the search and is a child to the Search component. When I pass the data from the Search component to the SearchResultsPage Component I get that Cannot read property 'map' of undefined and I don't know why, how can I pass the data properly via props? Here is my Search component:

import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import SearchResultsPage from '../SearchResultsPage/SearchResultsPage.jsx';
import { Link } from 'react-router-dom';
import axios from "axios";

class Search extends Component {
    constructor(props) {
        super(props);

        this.state = {
            searchResults: [],
            isLoading: false,
            isSearchStringFound: true
        }
    }


    getSearchQuery = (event) => {
        const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;

        const searchString = document.querySelector(".search-input").value;

        if (event.keyCode === 13) {
            this.setState({ ...this.state, isLoading: true });
            axios.post(SEARCH_RESULTS_ENDPOINT, {
                searchString: searchString,

            }).then(response => {
                this.setState({ ...this.state, searchResults: response.data });

                if (response.data.length === 0) {
                    this.setState({ ...this.state, isSearchStringFound: false });
                }

                else if (response.data.length > 0) {
                    this.setState({ ...this.state, isSearchStringFound: true });
                }

                this.setState({ ...this.state, isLoading: false });
                window.location.href = "/blog/searchResults"
            });
        }
    };

    render() {
        if (this.state.isLoading) {
            return <Spinner />
        }
        return (

            <div>
                <input
                    type="text"
                    placeholder="Search"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}

                />
                <div>
                    <SearchResultsPage
                        searchResults={this.state.searchResults}
                        isSearchStringFound={this.state.isSearchStringFound}
                    />
                </div>
            </div>
        );
    }
}

export default Search;

and my ResultsPage component:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import Footer from '../Footer/Footer.jsx';
import CustomHeader from '../CustomHeader/CustomHeader.jsx';
let title = 'Blog'

class SearchResultsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <CustomHeader
                    title={title}
                />
                <div>
                    {this.props.isSearchStringFound === false ? <div className="no-results-found">No results were found</div> : this.props.searchResults.map(result => (
                        <div key={result._id} >
                            <img src={result.picture} alt="avatar" />
                            <div >
                                <div>
                                    <h2>{result.title}</h2>
                                    <p>{result.date}</p>
                                    <p>{result.postContent}</p>
                                    <Link to={`/post/${result._id}`} className="read-more-btn">
                                        <button className="read-more-btn">Read more</button>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                <Footer />
            </div>
        )
    }
};



export default SearchResultsPage;

Answer 1

You aren't updating the state correctly. State updates inside event handlers are batched and are asynchronous which is why the state isn't correctly updated causing the error in child component

Also spreading this.state with this.setState isn't needed and you shouldn't be needed to redirect after axios call as the component is already rendered

You can update your state with a single setState invocation like

 axios.post(SEARCH_RESULTS_ENDPOINT, {
            searchString: searchString,

        }).then(response => {
            const data = response.data;
            let isSearchStringFound;

            if (response.data.length === 0) {
                isSearchStringFound= false;
            }

            else if (response.data.length > 0) {
                isSearchStringFound = true;
            }

            this.setState({ isSearchStringFound, searchResults: data, isLoading: false });
        });