Приложение React не будет отображать информацию из реквизита, даже если я могу консоль войти - PullRequest
Новая
       5

Приложение React не будет отображать информацию из реквизита, даже если я могу консоль войти

0 голосов
/ 07 апреля 2020

Так что в идеале мой родительский компонент отображает базу данных и отображает их по выбору пользователя. Прямо сейчас, прямо сейчас, информация передается правильно, и приложение отображает то, что мне тоже нужно (компонент карты), в правильном количестве, однако оно полно фиктивной информации. (Кто-то щелкает по пиву, в базе данных есть три типа пива, приложение отображает три карточных компонента с фиктивной информацией).

Вот родительский компонент: 

class Render  extends React.Component {

  constructor(props) {
        super(props);
        console.log("Here are your props", props);
  }
  

componentDidMount() {
      let options = {
        method: 'GET',
        url: 'http://localhost:8080/drinks',
      };

      let drinks =  [];
      console.log("this is",this);
      axios.request(options)
        .then( (response) => {
          console.log(response);
          this.setState({ drinks: response.data })
    })
    .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 nothing")
      return <div></div>
    }

  let firstElement = stateArray[0];

   let  drinks = firstElement.drinks; 
    

  let drinkChoice = this.props.reduxState.drinkChoice

  console.log("drinkchoice is here" , drinkChoice)

  // const props = this.props

  console.log("just drinks", drinks)


  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
  }

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

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

export default Render

Теперь мне нужно отобразить фактическую информацию базы данных для каждой записи. В child / cardcomponent - я могу console.log реквизит, и он будет правильно показывать правильную информацию. Это проходит. Но всякий раз, когда я пытаюсь быть более конкретным, c (props.name) он становится неопределенным.

Я занимался этим уже несколько дней, и я так растерялся. Информация прямо здесь! Мне просто нужно взять его!

Вот код для компонента ребенок / карта: 

const useStyles = makeStyles(theme => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  avatar: {
    backgroundColor: red[500],
  },
}));



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

if( props.length <= 0 )  {
    return (<div></div>);
} else {

console.log("props are here")
console.log( props  )

console.log("props dot name")
console.log ( props.name )
}
props.each(function (drink) {
  console.log(drink.name);
  });

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

Где я ошибся? Я чувствую, что перепробовал каждую возможную итерацию console.log и drink.name. Я в конце своей веревки.

Спасибо за любые советы.

sccreengrab журнала консоли

1 Ответ

0 голосов
/ 07 апреля 2020

В вашем журнале props вы видите массив объектов. Эти объекты имеют имена, а сам массив - нет, поэтому, когда вы console.log(props.name), он не работает, и вы видите неопределенный. Например, если вы попробуете console.log(props[0].name), вы должны увидеть имя.

Но странно то, что props должен НЕ быть массивом: это должен быть объект (чей ключи соответствуют атрибутам элемента JSX). Например: 

<InfoCard name="Bob"/>

создаст реквизит объект из: 

{name: 'Bob'}

Но когда вы регистрируете свои реквизиты, вы видите массив, и это означает, что вы как-то / где-то заменил фактический props объект на массив. Не видя код, в котором вы на самом деле создаете <Infocard>, я не могу говорить о деталях.

PS Это может возможно сделать, если вы сделали что-то вроде: 

`<MyComponent {...[{ name: 'Bob']} />`

... но, честно говоря, я не уверен, что это даже работает, и это кажется плохой идеей, даже если это работает.

...