javascript - 映射从 React 中的 Express 服务器获取的 JavaScript 对象

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 不是函数”。

这是我的 Express 服务器中的 res.json:

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

这是在 Home.js 中为 res.json 声明状态的地方。 (我知道“用户”现在没有任何语义意义，我会改变它。只是想先弄清楚为什么它不起作用。)

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 对象中映射“vitamins”数组，并将每个名称拉入其中选择下拉列表。

  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>
  )
 }

renderData() 中的 console.log 一开始什么都不显示，但是在 componentDidMount() 之后它显示了两次

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

编辑

我采纳了一些我得到的建议，并尝试应用它。

这个有效，我在每个子组件(维生素、矿物质等)中声明了状态

 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>
    )
  })
}

但是，我不想一直在每个组件中获取。我尝试在父菜单项中声明状态，并按照建议在数据 Prop 中传递 {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>
     )
   })
 }

但是，当我这样做时，我得到“类型错误:无法读取未定义的属性‘映射’”。

如果我执行“const { vitamins } = this.props.data”，我得到“TypeError:无法读取未定义的属性‘vitamins’”。

那么我如何在父级别获取数据，并将我需要的唯一数组传递给 data= ？

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 然后可以访问您的 Prop 数据。

您好!