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

Question

我正在尝试使用上下文api。 提交表单时出现错误TypeError：'this.props.fetchWeather不是函数'。

我的WeatherContext文件具有WeatherProvider和WeatherConsumer。 我的状态和fetchWeather函数是此文件。 当我记录什么时，传递给值fetchWeather的日志是未定义的。

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

我的问题是如何在WeatherContext中定义fetchWeather函数？ 我尝试绑定它。 我不确定我要去哪里。

此问题已更新，以反映我所做的更改...

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 /组件/搜索/索引

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

从App组件中，您没有将道具传递给SearchForm组件，并且因为您已将SearchForm与With WeatherContext一起包装在WeatherContext中未使用的components/Search/index.js中，所以fetchWeather道具SearchForm是未定义的。 您需要在App.js中使用components/Search/index.js类的SearchForm

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

Answer 2

解决了未定义的fetchWeather问题。 答案是从状态中取出fetchWeather函数，并将其放在WeatherProvider类的构造函数中。 然后将其绑定。 我很累