Question

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

我的WeatherContext文件有一个WeatherProvider＆amp; 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 /上下文/ 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 /组件/搜索/ 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组件中，您没有将props传递给SearchForm组件，因为您在WeatherContext中将SearchForm与components/Search/index.js一起包装，而您在App.js中没有使用它， fetchWeather prop SearchForm未定义。您需要在components/Search/index.js中的App.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类的构造函数中。然后绑定它。我累了......

在上下文文件中反应Context API / Bind函数？

2 个答案: