无法将索引传递给react.js中的子组件

Question

我的父组件中有此“ cardComponent”变量。它基于“ drinkChoice”的用户输入将信息从数据库传递到我的子组件（InfoCard）。

  let cardComponents = drinks.map((drink, index) =>{
    if (drink.type === drinkChoice || drinkChoice === 'All') {
      return (<InfoCard drinks={this.state.drinks} i ={ index } />)
    } 
    if (drinkChoice === 'Favorites' && drink.favorite === true) {
      return (<InfoCard drinks={this.state.drinks} i ={ index } />)
    }
    else {
      return console.log("Nothing to report")
    }   })

在我的子组件中，我要呈现每种饮料的特定信息。

export default function InfoCard(props, i) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
        title = { props.drinks[i].name }
    </Card>

如果我用consolelog记录一个特定的索引（例如console.log（props.drinks [1] .name）），它将起作用。但是当我尝试使用索引时，出现错误

TypeError：props.drinks [i]未定义

我很确定这是我忽略的某种愚蠢的语法问题，但它使我发疯。

Answer 1

反应功能组件仅采用单个参数props。您已将自己定义为再也收不到的。

应该是：

export default function InfoCard({ drinks, i }) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
      title = { drinks[i].name }
    </Card>
  );
}

改进的API可能只是将标题作为道具来传递。

父母

<InfoCard title={this.state.drinks[index].name} />

子

export default function InfoCard({ title }) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
      title = { title }
    </Card>
  );
}