javascript - 未捕获的 TypeError : this. props.populateAction 不是函数，React

Question

React 新手!我不断收到此错误消息。我无法弄清楚我做错了什么。请帮忙。

"Uncaught TypeError: this.props.populateAction is not a function"

 componentWillMount () {
    this.props.populateAction()
  }
  cities(){
    var {populateFormsData} = this.props.globalState

    return populateFormsData.map((item) => {
      return <option value={item}>{item}</option>
    })
  }
  homeTypes(){

  }
  bedRooms(){

  }
  render () {
    return (
      <div>
        <Header />
        <section id="content-area">
          <Filter change={this.change} globalState={this.state} 
 populateAction={this.populateForms} />
          <Listings listingsData={this.state.filteredData} />
        </section>

      </div>)
  }
}

Answer 1

您缺少 React 的基本概念。

<Component props={}/>` 将填充 props DOWN 渲染树，您的父组件正在引用您发送到

的值

<Filter />内部组件 <Filter />您可以调用的组件 this.props.populateAction()但不是来自 parent 。在父组件(您发布的组件)中 this.props.populateAction未定义

假设你想实现这个。

wrapper.js

class Wrapper extends React.Component {
  populateAction (where) { console.log(`Action called from ${where}`); }

  render() {
    return <ChildComponent populateAction={this.populateAction} />
  }
}

ChildComponent.js

class ChildComponent extends React.Component {
  componentWillMount () {
    this.props.populateAction('Child component')
  }

  render() {
    return (
      <div>
        <Header />
        <section id="content-area">
          <Filter change={this.change} globalState={this.state} 
 populateAction={this.props.populateAction} />
          <Listings listingsData={this.state.filteredData} />
        </section>

      </div>)
  }
}

filter.js

class Field extends React.Component {

  render() {
    this.props.populateAction('Filter component')
  }
}