Использование из контекста React возвращает Cannot read property 'map' of undefined - PullRequest
Новая
       56

Использование из контекста React возвращает Cannot read property 'map' of undefined

2 голосов
/ 30 мая 2020

Я пытаюсь передать данные между двумя компонентами в React с помощью Context. Данные, которые я хочу передать, представляют собой массив searchResults. Я настроил контекст и все остальное, но когда я пытаюсь использовать массив во втором компоненте, я получаю Cannot read property 'map' of undefined, как я могу использовать массив в моем втором компоненте, который я отправил через контекст?

Вот мой первый компонент: 

import React, { Component } from "react";
import axios from "axios";
export const SearchContext = React.createContext();

class Search extends Component {
    state = {
        searchResults: [],
        isSearched: false
    }


    getSearchQuery = (event) => {
        const queryString = document.querySelector(
            ".search-input"
        ).value;

        if (event.keyCode === 13) {
            axios.post("http://localhost:3001/search", {
                queryString: queryString,


            }).then(response => {

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

            });
            this.setState({ ...this.state, isSearched: true });
            window.location.href = '/blog/searchResults'
        }
    };

    render() {
        console.log(this.state.searchResults)
        return (
            <SearchContext.Provider value={this.state.searchResults}>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </SearchContext.Provider>

        );
    }
}

export default Search;

и мой второй компонент, который должен использовать массив: 

import React, { Component } from 'react';
import Footer from '../Footer/Footer.jsx';
import CustomHeader from '../CustomHeader/CustomHeader.jsx';
import { SearchContext } from '../../components/Search/Search.jsx';
let title = 'Blog'

class SearchResultsPage extends Component {
    render() {
        return (
            <div>
                <CustomHeader
                    title={title}
                />

               <SearchContext.Consumer>
                {(value) => value.map(result => (
                    <div key={result._id}>
                        <div>
                        </div>
                        <article>
                            {value.postContent}
                        </article>
                    </div>
                  )
                )}
            </SearchContext.Consumer>
                <Footer />
            </div>
        )
    }
};

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

думаю нужно вернуть 

<SearchContext.Consumer>
                    {value.map(result => {
                    return (    <div key={result._id}>
                            <div>
                            </div>
                            <article>
                                {value.postContent}
                            </article>
                        </div>

                    )}
                    )}
                </SearchContext.Consumer>
0 голосов
/ 30 мая 2020

Потребитель контекста принимает функцию как дочернюю, которой он передает значение контекста. Вы должны написать это, как показано ниже 

<SearchContext.Consumer>
                {(value) => value.map(result => (
                    <div key={result._id}>
                        <div>
                        </div>
                        <article>
                            {value.postContent}
                        </article>
                    </div>
                  )
                )}
            </SearchContext.Consumer>

Обновление: на основе вашего редактирования

Ваш SearchResultsPage не отображается как дочерний компонент компонента поиска, и для правильной работы потребителя контекста ему требуется поставщик контекста в иерархии.

Пожалуйста, визуализируйте страницу SearchResults, например, 

<Search>
    <SearchResultsPage />
</Search>

, а также в компоненте поиска вам нужно будет потреблять и отображать дочерние элементы 

render() {
    console.log(this.state.searchResults)
    return (
        <SearchContext.Provider value={this.state.searchResults}>
            <input
                type="text"
                className="search-input"
                onKeyDown={(e) => this.getSearchQuery(e)}
            />
            {this.props.children}
        </SearchContext.Provider>

    );
}
...