为什么我不能将此信息从一个反应组件推送到另一个？

Question

仍然习惯 React 并正确使用道具。

但基本上我有这个反应组件，我试图获取“drinkInfo”中的所有信息并使用道具将它们全部发送到 CardInfo 组件，以便我可以在那里呈现它。然而我得到“道具未定义”，我不确定为什么。

class Render  extends React.Component {

  constructor(props) {
        super(props);
  }

componentDidMount() {
    // call the drinks endpoint (via axios)
      let options = {
        method: 'GET',
        url: MYURL,
      };

    // let drinks = array of drinks
      let drinksFromDatabase =  [];
    // axios request
      axios.request(options)
        .then( (response) => {
          console.log(response);
          drinksFromDatabase =  response.data
          console.log("Drinks from Database are:")
          console.log(drinksFromDatabase)

          this.setState({ drinks : drinksFromDatabase})
    })
    .catch(function (error) {
      console.log(error);
    });
}

render() {
    
    console.log("this.state is",[this.state])
    let stateArray = [this.state]

    if (stateArray[0] == null) {
      console.log("returning with nthing")
      return <div></div>
    }


  let firstElement = stateArray[0];
  let drinks = firstElement.drinks; 

  let drinkChoice = this.props.reduxState.drinkChoice
  console.log("Drink Choice is: " , drinkChoice)

  let drinkInfo = {
    type: props.drinks.type,
    name:  props.drinks.name,
    manufacturer: props.drinks.manufacturer,
    rating: props.drinks.rating,
    date: props.drinks.date,
    description: props.drinks.description,
    favorite: props.drinks.favorite
  }

  console.log("Drink info is: " , drinkInfo)

  let cardComponents = drinks.map((drink) =>{
    if (drink.type === drinkChoice) {
      return (<InfoCard {props.drinkInfo} />)
    } else {
      return <div>Nothing to Report</div>
    }})

  return (
      <div>
          <div>{cardComponents}</div>
      </div>
   )
  }
}

export default Render

Answer 1

我看到您正在将道具传递给您的组件。但是在使用 ComponentDidMount() 挂载组件后，您会收到饮料的响应。

在 ComponentDidMount() 中 this.SetState({drinks: DrinksFromDatabase}) 已初始化，因此当您使用 console.log(drinks) 时，会记录饮料状态。

您可能需要重新阅读文档：

https://reactjs.org/docs/components-and-props.html

关于道具和状态。由于您设置了状态，因此您需要更改：

let drinkInfo = {
    type: props.drinks.type,
    name:  props.drinks.name,
    manufacturer: props.drinks.manufacturer,
    rating: props.drinks.rating,
    date: props.drinks.date,
    description: props.drinks.description,
    favorite: props.drinks.favorite
  }

到：

let drinkInfo = {
        type: this.state.drinks.type,
        name:  this.state.drinks.name,
        manufacturer: this.state.drinks.manufacturer,
        rating: this.state.drinks.rating,
        date: this.state.drinks.date,
        description: this.state.drinks.description,
        favorite: this.state.drinks.favorite
      }

由于您使用drinks.map(drink => {...}) 进行迭代，因此您可以在组件中发送每个可迭代饮品的值：

let cardComponents = drinks.map((drink) =>{
    if (drink.type === drinkChoice) {
      return (<InfoCard props={drinkInfo} />)
    } else {
      return <div>Nothing to Report</div>
    }})

然后您可以从您的 InfoCard 道具访问道具...但老实说，drinkInfo 似乎包含与您的状态饮料相同的信息，所以我不确定您为什么要创建一个对象值的对象，然后您可以更改以前的：

let cardComponents = drinks.map((drink) =>{
    if (drink.type === drinkChoice) {
      return (<InfoCard props={this.state.drinks} />)
    } else {
      return <div>Nothing to Report</div>
    }})

这将传递您所有的饮料值，而无需创建另一个对象。希望这能让您朝着正确的方向前进。

Answer 2

您正在使用 react 类组件，所以您忘记添加 this 来访问道具。

this.props.drinks.type
this.props.drinks.name
 .....