Question

我正在尝试将 WantedAirline 变量传递给 AirlineSection 组件，但我不断收到来自 AirlineSection 组件内部的错误 TypeError: Cannot read property 'wantedAirline' of undefined。

render() {
    const wantedAirline = this.state.wantedAirline.filter(p =>
      p.name.includes(this.state.searchTerm)
    )
    return (
      <div>
        <header>Pokemon Searcher</header>

        <AirlineSection 
        wantedAirline = {wantedAirline}
        airlines = {this.state.airlines}
        handleDelete={this.handleDelete}/>

      </div>
    )
  }

AirlineSection 组件如下所示：

function AirlineSection(props){
    console.log(props, 'airline section props');
    return(
        <div>
            <h2>Airlines</h2>
            {props.airlines.map(airline => <AirlineCard key={airline.id}  wantedAirline={this.wantedAirline} airline={airline} handleDelete={props.handleDelete}/>)}
        </div>
    )
}

Answer 1

将 wantedAirline={this.wantedAirline} 替换为 wantedAirline={props.wantedAirline}，看起来 AirlineSection 是您的功能组件。

您将 wantedAirline 作为道具传递，因此您还必须使用道具访问它。

如何在 React 中将 const 变量作为 prop 传递给组件？

1 个答案: