Сопоставление с объектом JavaScript, полученным с сервера Express в React

Question

У меня есть несколько массивов внутри объекта для различных типов микроэлементов (витамины, минералы, антиоксиданты, аминокислоты и омеги).Я хочу, чтобы каждый из них передавался как <option> внутри собственного выпадающего меню, отображающего их собственный тип (например, витамины: витамин B2, B6, B5 и т. Д.)

Моя консоль показывает, что данные имеютбыл успешно извлечен:

{vitamins: Array(6), minerals: Array(2), aminoacids: Array(1), antioxidants: Array(2), omegas: Array(1)}

Но когда я попадаю на Vitamins.js, где я пытаюсь отобразить опцию, он говорит: «TypeError: vitamins.map не является функцией».

Вот мой res.json с моего сервера Express:

 router.get('/', function(req, res, next) {
 res.json({vitamins: [
  {
    name: "Vitamin B2"
  },
  {
    name: "Vitamin B6"
  }, 
  {
    name: "Vitamin B5"
  }
],
 minerals: [
  {
    name: "Calcium"
  },
 {
  name: "Zinc"
  }
 ] 
});
});

Вот где объявляется состояние для res.json в Home.js.(Я знаю, что "пользователи" сейчас не имеют никакого смыслового смысла, и я изменю его. Просто пытаюсь выяснить, почему он не работает первым.)

constructor(props) {
  super(props);
  this.state = {users: []};
 }

 componentDidMount() {
   fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
 }

 render() {
   return (
      <MenuItems users={this.state.users} />
  )
}

Это Menuitems.js, одинна уровень ниже Home.js, где я вызываю функцию handleChange, поэтому, когда пользователь нажимает новый микро (Витамин B2 -> B6), новый микро (B6) становится новым выбранным параметром.

 constructor(props) {
  super(props);
   this.state = {
    value: '',
  };

   this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
  const { value } = e.target;
   this.setState({
      value: value
   });
 }

 render() {
  return (
    <ul className="menuitems">
      <li>
        <Vitamins data={this.props.users} />
      </li>
      <li>
         <Minerals data={this.props.users} />
       </li>
    </ul>
  )
}

И это Vitamins.js (у меня также есть Minerals.js, AminoAcids.js и т. Д.), Где я пытаюсь отобразить массив «витамины» в моем объекте res.json и вытянуть каждое имя внутривыпадающий список.

  renderData() {
    const vitamins = this.props.data;
    console.log("the data", vitamins);
    return vitamins.map((micro, index) => {
     return (
       <option value={micro.value} key={index}>{micro.name}</option>
     )
   })
 }

  render() {
   return (
    <form>
      <select value={this.props.value} onChange={this.handleChange}>
        <option value="" selected>--Vitamins--</option>
        {this.renderData()}
      </select>
    </form>
  )
 }

console.log в renderData () сначала ничего не показывает, но после componentDidMount () показывает это ДВАЖДЫ

 the data {vitamins: Array(6), minerals: Array(2), aminoacids: Array(1), antioxidants: Array(2), omegas: Array(1)}

EDIT

Я воспользовался некоторыми советами, которые мне дали, и попытался их применить.

Этот сработал, когда я объявил состояние внутри каждого дочернего компонента (витамины, минералы и т. Д.)

 state = {users: []};

 componentDidMount() {
   fetch('/users')
    .then(res => res.json())
    .then(users => {
      this.setState({
        users: users.vitamins
      });
    })
  }

 renderData() {
   const vitamins = this.state.users;
   return vitamins.map((micro, index) => {
   return (
      <option value={micro.value} key={index}>{micro.name}</option>
    )
  })
}

Тем не менее, я не хочу продолжать получать выборки в каждой композицииNENT.Я попытался объявить состояние в родительских MenuItems и передать {this.state.users.vitamins} в реквизиты данных, как это было предложено.

(MenuItems.js)

state = {users: []};

componentDidMount() {
  fetch('/users')
    .then(res => res.json())
    .then(users => {
     this.setState({
       users
     });
   })
 }

render() {
  return (
    <ul className="menuitems">
      <li>
        <Vitamins data={this.state.users.vitamins} />
      </li>
    </ul>
 )
}

(Vitamins.js)

 renderData() {
   const vitamins = this.props.data;
   return vitamins.map((micro, index) => {
     return (
       <option value={micro.value} key={index}>{micro.name}</option>
     )
   })
 }

Но я получаю "TypeError: Невозможно прочитать свойство 'map' изundefined ", когда я делаю это.

Если я делаю" const {vitamins} = this.props.data ", я получаю" TypeError: Невозможно прочитать свойство 'vitamins' of undefined ".

Итак, как мне получить данные на родительском уровне и передать единственный массив, который мне нужен, в данные =?

Answer 1

В данный момент вы выбираете только пользователей.В файле Vitamins.js вы пытаетесь получить данные из файла this.props.data, который предоставит вам информацию о том, что вы имеете дело с массивами, как показано в журнале консоли.Вам нужно «разделить» свои данные, прежде чем вы сможете их получить.Например,

this.setState({ users: users.vitamins)} 

(я не знаю вашу экосистему, поэтому все, что вы пытаетесь получить, должно быть связано с событием setState, иначе вы просто передаете данные без определения данных).

Как уже было опубликовано в разделе комментариев, вы также можете попытаться разделить его при передаче данных компоненту:

    <Vitamins data={this.props.users.vitamins}

Это в основном то же самое, вы берете пользователей иполучить данные витаминов.Всякий раз, когда вы хотите отобразить массив, вы должны его «открыть».

Вот базовый пример того, как вы обычно это делаете:

  .then(response => response.json())
  .then(data => data.users.your-data-you-want-to-fetch.map((x) => {

    this.setState({
      vitamin: x.name,
      id: x.id,
      })

}))

data.vitamin / data.id будет тогда доступен для вашегореквизит данных.

Привет!