React Context API / Функция привязки в файле контекста?

Question

Я пытаюсь использовать контекстный API.Я получаю сообщение об ошибке TypeError: «this.props.fetchWeather не является функцией», когда я отправляю форму.

В моем файле WeatherContext есть WeatherProvider и WeatherConsumer.Мое состояние и функция fetchWeather - это этот файл.Когда я регистрирую то, что передается в значение, fetchWeather записывается как неопределенное.

{term: "", forecast: Array(0), fetchWeather: undefined}

Мой вопрос: как мне определить функцию fetchWeather в WeatherContext?Я пытался связать это.Я не уверен, где я иду не так.

Этот вопрос был обновлен, чтобы отразить сделанные мной изменения ...

src / index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import { WeatherProvider, WeatherContext } from 
'./context/WeatherContext'

ReactDOM.render(
     <WeatherProvider>
        <WeatherContext.Consumer>
            {({ term, forecast, fetchWeather }) => 
                 <App term={ term } 
                      forecast={ forecast } 
                      fetchWeather={ fetchWeather }  />
            }
        </WeatherContext.Consumer>
     </WeatherProvider>, 
     document.getElementById('root')
);
registerServiceWorker();

src / app.js

import React, { Component } from 'react'
import SearchForm from './components/Search/Search_Form'

export default class App extends React.Component {
    render() {
        return (
          <div className="App">
            <SearchForm {...this.props}/>
          </div>
        );
    }
}

src / context / WeatherContext

import React, { Component } from 'react'
import axios from 'axios'
import _ from 'lodash'

export const WeatherContext = React.createContext();

export class WeatherProvider extends React.Component {

    state = {
        context: {
            input: '',
            forecast: [],
            fetchWeather: this.fetchWeather
        }
    }

     fetchWeather = (term) => {
        let QUERY = term
        const KEY = `key`
        let URL = `http://url.com/q=${QUERY}&appid=${KEY}`

        axios.get(URL)
        .then( res => {
          // do something ...
        })
    }

    render() {
        return (
            <WeatherContext.Provider 
            value={{ ...this.state.context }} >
                { this.props.children }
            </WeatherContext.Provider>
        )
    }
}

src / components / Поиск / индекс

import React from 'react'
import { WeatherContext } from '../../context/WeatherContext'
import SearchForm from './Search_Form'

export default (props) => (
    <WeatherContext.Consumer>
        {
            ({fetchWeather}) => 
            <SearchForm {...props} fetchWeather={fetchWeather} />
        }
    </WeatherContext.Consumer>
)

src / components / Поиск / Search_Form

import React, { Component } from 'react'

class SearchForm extends Component {
    handleFormSubmit = (e) => {
        e.preventDefault();
        let term = this.input.value
        this.props.fetchWeather(term)
    }

    handleClear =(e) => {
        e.preventDefault();
        this.setState({
            input: ''
        }) 
    }

    render() {
        console.log(this.props);
        return (
         <div>
             <form className="form" onSubmit={ this.handleFormSubmit }>
                <input type='text'
                    placeholder='Enter a US City'
                    ref={input => { this.input = input }}/>
                <button type="submit"> Search </button>        
                <button onClick={ this.handleClear }> x </button>
             </form>
         </div>

        )
     }
}


 export default SearchForm;

Answer 1

Устранена неопределенная проблема fetchWeather.Ответ заключался в том, чтобы вывести функцию fetchWeather из состояния и поместить ее в конструктор класса WeatherProvider.Тогда связывай это.Я устал ...

Answer 2

Из компонента App вы не передаете реквизиты компоненту SearchForm, и, поскольку вы обернули SearchForm с помощью WeatherContext в components/Search/index.js, который вы не используете в App.js, fetchWeather prop SearchForm имеет видне определено.Вам необходимо использовать SearchForm в App.js из components/Search/index.js, например,

import React, { Component } from 'react'
import SearchForm from './components/Search/index.js'

export default class App extends React.Component {
    render() {
        return (
          <div className="App">
            <SearchForm />
          </div>
        );
    }
}

или

передать реквизиты из App.js

import React, { Component } from 'react'
import SearchForm from './components/Search/Search_Form'

export default class App extends React.Component {
    render() {
        return (
          <div className="App">
            <SearchForm {...this.props}/>
          </div>
        );
    }
}