Почему я не могу извлечь эту информацию из одного реагирующего компонента в другой?

Question

Все еще привыкаю реагировать и правильно оборачиваю голову, используя реквизит.

Но, по сути, у меня есть этот компонент реакции, и я пытаюсь взять всю информацию в "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 ({напитков: drinkFromDatabase}) инициализируется так, когда вы console.log (напитков) состояние напитков зарегистрировано.

Вы можете перечитать документы:

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

вы используете компонент класса реакции, поэтому вы забыли добавить this для доступа к реквизиту.

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