Реагировать на экспорт контекста возвращает ошибку синтаксического анализа: экспорт SearchContextConsumer не определен - PullRequest
Новая
       82

Реагировать на экспорт контекста возвращает ошибку синтаксического анализа: экспорт SearchContextConsumer не определен

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

Я пытаюсь создать контекст для передачи данных другому компоненту без использования детализации реквизита, но когда я экспортирую своего потребителя, я получаю это.

Вот мой код: 

import React, { Component } from "react";
import axios from "axios";

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

    SearchContext = React.createContext('context');
    SearchContextConsumer = SearchContext.Consumer;
    data = { searchResults: this.state.searchResults }

    Search = ({ children }) => (
        <SearchContext.Provider value={searchResults}>{children}</SearchContext.Provider>
    )

    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() {
        return (
            <div>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </div>
        );
    }
}

export { SearchContextConsumer }
export default Search;

Ответы [ 2 ]

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

Таким способом нельзя экспортировать свойство класса.

Я думаю, что самый простой и чистый способ сделать то, что вы задумали, - это создать свой context за пределами вашего класса следующим образом: 

import React, { Component } from "react";
import axios from "axios";

const SearchContext = React.createContext();

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



    data = { searchResults: this.state.searchResults }

    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() {
        return (
            <SearchContext.Provider value={searchResults}>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </SearchContext.Provider>
        );
    }
}

export SearchContext.Consumer as SearchContextConsumer
export default Search;

и вот как вы можете выполнять вышеуказанные функции в Function Component, который более читабелен и содержит меньше кода: 

import React, { Component } from "react";
import axios from "axios";

const SearchContext = React.createContext();

const Search = () => {
  const [state, setState] = useState({
    searchResults: [],
    isSearched: false
  });

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

    if (event.keyCode === 13) {
      axios
        .post("http://localhost:3001/search", {
          queryString: queryString
        })
        .then(response => {
          setState({ ...state, searchResults: response.data });
        });
      setState({ ...state, isSearched: true });
      window.location.href = "/blog/searchResults";
    }
  };

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

export default Search;

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

const searchResults = React.useContext(SearchContext);
0 голосов
/ 29 мая 2020

Мне это кажется излишне сложным. Почему бы вам прямо не экспортировать созданный контекст и напрямую обернуть дочерние элементы в Provider: 

import React, { Component } from "react";
import axios from "axios";

export const SearchContext = React.createContext (); 

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

    data = { searchResults: this.state.searchResults }

    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() {
        return (
            <SearchContext.Provider value={searchResults}>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </SearchContext.Provider>
        );
    }
}

export default Search;

Компоненты, которые хотите использовать контекст, должны быть заключены в Consumer: 

import {SearchContext} from "Search"

<SearchContext.Consumer>
  {value => /* render something based on the context value */}
</SearchContext.Consumer>
...