Question

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

＆＃34;未捕获的TypeError：this.props.populateAction不是函数＆＃34;

 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={} /＆gt;`将填充道具 DOWN 渲染树，您的父组件正在引用您要发送到

的值

<Filter />组件，在<Filter />组件中，您可以调用this.props.populateAction()但不能从父组件调用this.props.populateAction组件。在父组件中（您发布的组件）class Wrapper extends React.Component { populateAction (where) { console.log(`Action called from ${where}`); } render() { return <ChildComponent populateAction={this.populateAction} /> } }未定义

假设你想实现这个目标。

<强> wrapper.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>)
  }
}

<强> ChildComponent.js

class Field extends React.Component {

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

<强> filter.js

 min cost
 cost ≥ f(x) − Mδ
 cost ≥ g(x) − M(1−δ)
 δ ϵ {0,1}

未捕获的TypeError：this.props.populateAction不是函数，React

1 个答案: