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

Question

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

但基本上我有这个反应组件，我正在尝试获取 "drinkInfo" 中的所有信息并使用道具将其全部发送到 CardInfo 组件，以便我可以在那里呈现它。但是我得到了 "Props is not defined"，我不太确定为什么。

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

您正在使用 React class 组件，因此您忘记添加 this 来访问道具。

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

Answer 2

我看到您正在将 props 传递给您的组件。但是在使用 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>
    }})

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

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

Why can't I push this information from one react component to another?

components

jsx

reactjs

react-props