在上下文文件中反应上下文API /绑定功能？

Question

I am trying to use the context api. I'm getting an error TypeError: 'this.props.fetchWeather is not a function' when I submit the form.

My WeatherContext file has a WeatherProvider & WeatherConsumer. My state and a fetchWeather function are this file. When I log what is being passed to the value fetchWeather logs as undefined.

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

My question is how do I define the fetchWeather function within the WeatherContext? I tried binding it. I'm not sure where I'm going wrong.

This question has been updated to reflect changes I made ...

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/Search/index

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/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

From the App component, you are not passing the props to the SearchForm component and since you have wrapped the SearchForm with With WeatherContext in components/Search/index.js which you aren't using in App.js, the fetchWeather prop SearchForm is undefined. You need to use SearchForm in App.js from components/Search/index.js like

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>
        );
    }
}

or

pass the props down from 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>
        );
    }
}

Answer 2

Resolved the undefined fetchWeather issue. The answer was to take the fetchWeather function out of the state and put it inside a constructor in the WeatherProvider class. Then bind it. I was tired...