React Context API报错：fetchWeather未定义，如何正确绑定函数？

我来帮你排查这个问题，核心原因是你在WeatherProvider的state中提前引用了还未初始化的fetchWeather函数，另外组件间的props传递也有冗余，导致最终SearchForm拿到的fetchWeather是undefined。

问题根源分析 #

在你的WeatherProvider类中，state是作为类属性定义的，当类实例化时，state会先被初始化，而fetchWeather这个箭头函数作为类字段，是在state初始化之后才被添加到实例上的。所以当你在state.context里写fetchWeather: this.fetchWeather时，this.fetchWeather此时还是undefined，这就导致Provider传递给Consumer的fetchWeather是无效的。

另外，你的组件传递链有点混乱：index.js里通过Consumer把fetchWeather传给App，App再传给SearchForm，但Search的index.js又通过Consumer再次传递fetchWeather，这不仅冗余，还可能导致props覆盖的问题。

修复方案 #

1. 修正WeatherProvider的value传递 #

不要把fetchWeather存在state里，而是在Provider的value中直接合并state和fetchWeather函数，这样每次render时都能拿到正确的函数引用：

// src/context/WeatherContext.js
import React, { Component } from 'react'
import axios from 'axios'
import _ from 'lodash'

export const WeatherContext = React.createContext();

export class WeatherProvider extends React.Component {
  state = {
    input: '',
    forecast: []
  }

  fetchWeather = (term) => {
    let QUERY = term
    const KEY = `key`
    let URL = `http://url.com/q=${QUERY}&appid=${KEY}`
    axios.get(URL)
      .then( res => {
        // 这里可以更新state，比如：
        // this.setState({ forecast: res.data })
      })
      .catch(err => {
        console.error('获取天气失败:', err)
      })
  }

  render() {
    // 直接合并state和fetchWeather到value中
    const value = {
      ...this.state,
      fetchWeather: this.fetchWeather
    }
    return (
      <WeatherContext.Provider value={value} >
        { this.props.children }
      </WeatherContext.Provider>
    )
  }
}

2. 简化组件的props传递 #

你不需要在index.js里用Consumer给App传props，直接让App的子组件通过Consumer获取上下文即可，这样更符合Context的使用方式：

修改src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { WeatherProvider } from './context/WeatherContext'

ReactDOM.render(
  <WeatherProvider>
    <App />
  </WeatherProvider>,
  document.getElementById('root')
);
registerServiceWorker();

修改src/App.js

import React, { Component } from 'react'
import Search from './components/Search' // 注意这里导入的是Search组件，不是SearchForm

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

保持src/components/Search/index.js的写法（这个是正确的）

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

3. 修复SearchForm中的小问题 #

你的SearchForm里的handleClear调用了this.setState，但组件并没有自己的state，应该调整为直接清空输入框（如果需要同步上下文的input状态，可以在Provider中添加专门的更新函数）：

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

class SearchForm extends Component {
  handleFormSubmit = (e) => {
    e.preventDefault();
    let term = this.input.value.trim()
    if (term) {
      this.props.fetchWeather(term)
      // 清空输入框
      this.input.value = ''
    }
  }

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

  render() {
    console.log(this.props); // 现在应该能看到fetchWeather是有效函数了
    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;

额外建议 #

• 对于Context中的状态更新，建议在Provider中定义专门的更新函数（比如updateInput、setForecast），而不是直接让子组件修改state，这样更符合单向数据流的原则。
• 如果你的项目支持React Hooks，可以考虑使用useContext钩子，简化Consumer的写法，让代码更简洁。

内容的提问来源于stack exchange，提问作者TYPOI