Question

我创建了2个不同的json，我需要使用一个函数从两个json中获取courseName，并将其填充到下拉列表中

我目前能够在输入元素内单独选项标签中的两个json上使用map函数来实现此目的

import React from 'react'
import MesaLinda from './MesaLinda.json';
import TijerasCreek from './TijerasCreek.json';
import { Form, FormGroup, Label, Input, Button } from 'reactstrap'
import '../App.css';


const course = (props) => {
    return (
        <Form>
            <FormGroup>
                <Label for="courseSelect">Course</Label>
                <Input type="select" name="select" id="courseSelect" >
                    {MesaLinda.CostaMesaCCMesaLinda.map((mesaLinda, index) => {
                        return <option>
                            {mesaLinda.courseName}
                        </option>
                    })}
                    {TijerasCreek.TijerasCreek.map((tijerasCreek, index) => {
                        return <option>
                            {tijerasCreek.courseName}
                        </option>
                    })}
                </Input>
            </FormGroup>
            <FormGroup>

我希望能够使用一个map函数来遍历多个不同的json文件以获得courseName

Answer 1

您可以执行以下操作：

import React from 'react'
import MesaLinda from './MesaLinda.json';
import TijerasCreek from './TijerasCreek.json';
import { Form, FormGroup, Label, Input, Button } from 'reactstrap'
import '../App.css';


const course = (props) => {
    return (
        <Form>
            <FormGroup>
                <Label for="courseSelect">Course</Label>
                <Input type="select" name="select" id="courseSelect" >
                    {[
                       ...MesaLinda.CostaMesaCCMesaLinda, 
                       ...TijerasCreek.TijerasCreek
                        ].map((json, index) => {
                        return <option>
                            {json.courseName}
                        </option>
                    })}
                </Input>
            </FormGroup>
         <FormGroup>

使用传播运算符连接两个数组，然后在其上调用相同的map函数。

Answer 2

kasperlauge的答案肯定是很棒的。如果您确实打算添加更多的json，建议您在当前代码之外添加一个类似这样的函数，然后使用json数组进行调用：

const jsonOptions = ( json ) => {
  return json.map( ( { courseName } ) => {
    return <options>
      { courseName }
    </options>;
  } );
};

const course = ( props ) => {
...
  <Input type="select" name="select" id="courseSelect">
    jsonOptions( [ 
      ...MesaLinda.CostaMesaCCMesaLinda, 
      ...TijerasCreek.TijerasCreek 
    ] )
  </Input>
...

这只是一个替代方案，我认为它将更好地扩展。（还要注意map（）内部的销毁，这非常有用。）

如何通过不同的json映射并从数组获取数据

2 个答案: