Reactjs 使用映射数据切换组件

我正在创建一个组件，其视图可以像手风琴一样打开和关闭。视图的数据来自此JSON文件：

{
  "tracks": [
    {
      "uid": "001",
      "line_number": "S123456",
      "feed": [
        {
          "line_number": "S123456",
          "outer_situation": "low",
          "departure_time": "2020-04-21T10:55Z"
        },
        {
          "line_number": "S123456",
          "outer_situation": "high",
          "departure_time": "2020-04-21T10:55Z"
        },
        {
          "line_number": "S123456",
          "departure_time": "2020-04-21T10:55Z"
        }
      ]
    },
    {
      "uid": "002",
      "line_number": "S00000",
      "feed": [
        {
          "line_number": "S123456",
          "outer_situation": "low",
          "departure_time": "2020-04-21T10:55Z"
        },
        {
          "line_number": "S123456",
          "outer_situation": "high",
          "departure_time": "2020-04-21T10:55Z"
        },
        {
          "line_number": "S123456",
          "outer_situation": "high",
          "departure_time": "2020-04-21T10:55Z"
        }
      ]
    }
  ]
}

每个“轨迹”代表一行，因此可以有无限数量的行。 当“我的行”关闭时，地图如下所示：

<div>
            {connex.map((tracks) => (
              <div
                className={style.connection_container}
                onClick={() => setShowConnections(!showConnections)}
                onKeyPress={() => setShowConnections(!showConnections)}
                role="button"
                tabIndex="0"
              >

                <div span={1}>
                </div>
                <div span={3}>
                  <div className={style.vehicle_id}>
                    <p>{tracks.line_number}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.location_text}>
                  {tracks.origin}
                  </span>
                  <span> - </span>
                  <span className={style.location_text}>
                    {tracks.destination}
                  </span>
                </div>
                <div span={8}>
                  <div className={style.stop_point}>
                    <p>{tracks.stop_point}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.stop_point}>
                    <p>{tracks.arrival_time}</p>
                  </span>
                </div>
              </div>
            ))}
          </div>

{connex.map（（轨道）=>(
setShowConnections（！showConnections）}
onKeyPress={（）=>setShowConnections（！showConnections）}
role=“按钮”
tabIndex=“0”
>
{tracks.line_number}

{tracks.origin}
- 
{tracks.destination}
{tracks.stop_point}

{轨道。到达时间}

))}

在添加映射的JSON数据之前，我使用了创建JSON后将包含的信息，因此原始的切换函数可以正常工作。但是，现在，当我试图在打开的视图中添加.map函数时，我在语法上做了一些错误的事情，我无法理解它是什么。 错误：

JSX表达式必须有一个父元素。

---

既然我已经有了显示数据的条件，那么有没有更好的方法来创建这个切换组件来简化我访问数据的方式？

您使用的是多个元素，而不是react fragment或

index.js

第63行中的任何元素， 试试这样的

            {connex.map((tracks) => (
              <> {/*!! here !!*/}
              <div
                className={style.connection_container}
                onClick={() => setShowConnections(!showConnections)}
                onKeyPress={() => setShowConnections(!showConnections)}
                role="button"
                tabIndex="0"
              >

                <div span={1}>
                </div>
                <div span={3}>
                  <div className={style.vehicle_id}>
                    <p>{tracks.line_number}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.location_text}>
                  {tracks.origin}
                  </span>
                  <span> - </span>
                  <span className={style.location_text}>
                    {tracks.destination}
                  </span>
                </div>
                <div span={8}>
                  <div className={style.stop_point}>
                    <p>{tracks.stop_point}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.stop_point}>
                    <p>{tracks.arrival_time}</p>
                  </span>
                </div>
              </div>

              // start feed data
              <div>
              <div className={style.sub_container_wrapper}>
                <div className={style.bracket} />
                <div className={style.sub_container}>

                  <div span={1}>
                  </div>
                  <div span={2}>
                    <div className={style.vehicle_id}>
                     {connex.feed[0].line_number}
                    </div>
                  </div>
                  </div>
              </div>
            </div>
            </> {/*!! here !!*/}
            ))}

{connex.map（（轨道）=>(
{/*！！这里！！*/}
setShowConnections（！showConnections）}
onKeyPress={（）=>setShowConnections（！showConnections）}
role=“按钮”
tabIndex=“0”
>
{tracks.line_number}

{tracks.origin}
- 
{tracks.destination}
{tracks.stop_point}

{轨道。到达时间}

//开始馈送数据
{connex.feed[0]。行号}
{/*！！这里！！*/}
))}

在

index.js

第63行中，您使用的是没有react片段的多元素或任何元素， 试试这样的

            {connex.map((tracks) => (
              <> {/*!! here !!*/}
              <div
                className={style.connection_container}
                onClick={() => setShowConnections(!showConnections)}
                onKeyPress={() => setShowConnections(!showConnections)}
                role="button"
                tabIndex="0"
              >

                <div span={1}>
                </div>
                <div span={3}>
                  <div className={style.vehicle_id}>
                    <p>{tracks.line_number}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.location_text}>
                  {tracks.origin}
                  </span>
                  <span> - </span>
                  <span className={style.location_text}>
                    {tracks.destination}
                  </span>
                </div>
                <div span={8}>
                  <div className={style.stop_point}>
                    <p>{tracks.stop_point}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.stop_point}>
                    <p>{tracks.arrival_time}</p>
                  </span>
                </div>
              </div>

              // start feed data
              <div>
              <div className={style.sub_container_wrapper}>
                <div className={style.bracket} />
                <div className={style.sub_container}>

                  <div span={1}>
                  </div>
                  <div span={2}>
                    <div className={style.vehicle_id}>
                     {connex.feed[0].line_number}
                    </div>
                  </div>
                  </div>
              </div>
            </div>
            </> {/*!! here !!*/}
            ))}

{connex.map（（轨道）=>(
{/*！！这里！！*/}
setShowConnections（！showConnections）}
onKeyPress={（）=>setShowConnections（！showConnections）}
role=“按钮”
tabIndex=“0”
>
{tracks.line_number}

{tracks.origin}
- 
{tracks.destination}
{tracks.stop_point}

{轨道。到达时间}

//开始馈送数据
{connex.feed[0]。行号}
{/*！！这里！！*/}
))}

应该将多个孩子包装到一个父div中，并且map函数中没有任何父div。检查我添加注释的代码。试试这个：

import React, { useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import style from './style.css'
import data from './data.json'

const App = () => {

 const [showConnections, setShowConnections] = useState(false);
  const connex = data.tracks;

    return (
        <div className={style.interchange_connections}>
      {/* default = closed */}
      {!showConnections

        ? (
          <div>
            {connex.map((tracks) => (
              <div
                className={style.connection_container}
                onClick={() => setShowConnections(!showConnections)}
                onKeyPress={() => setShowConnections(!showConnections)}
                role="button"
                tabIndex="0"
              >

                <div span={1}>
                </div>
                <div span={3}>
                  <div className={style.vehicle_id}>
                    <p>{tracks.line_number}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.location_text}>
                  {tracks.origin}
                  </span>
                  <span> - </span>
                  <span className={style.location_text}>
                    {tracks.destination}
                  </span>
                </div>
                <div span={8}>
                  <div className={style.stop_point}>
                    <p>{tracks.stop_point}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.stop_point}>
                    <p>{tracks.arrival_time}</p>
                  </span>
                </div>
              </div>
            ))}
          </div>
        )
        : (
      <>
            {/* opened view */}

                    <div>
            {connex.map((tracks) => (
               <div> {/* parent div */}
              <div
                className={style.connection_container}
                onClick={() => setShowConnections(!showConnections)}
                onKeyPress={() => setShowConnections(!showConnections)}
                role="button"
                tabIndex="0"
              >

                <div span={1}>
                </div>
                <div span={3}>
                  <div className={style.vehicle_id}>
                    <p>{tracks.line_number}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.location_text}>
                  {tracks.origin}
                  </span>
                  <span> - </span>
                  <span className={style.location_text}>
                    {tracks.destination}
                  </span>
                </div>
                <div span={8}>
                  <div className={style.stop_point}>
                    <p>{tracks.stop_point}</p>
                  </div>
                </div>
                <div span={6}>
                  <span className={style.stop_point}>
                    <p>{tracks.arrival_time}</p>
                  </span>
                </div>
              </div>

              // start feed data
             
              <div className={style.sub_container_wrapper}>
                <div className={style.bracket} />
                <div className={style.sub_container}>

                  <div span={1}>
                  </div>
                  <div span={2}>
                    <div className={style.vehicle_id}>
                     {tracks.feed[0].line_number} //use tracks not connex
                    </div>
                  </div>
                  </div>
              </div>
            </div> // parent div  closed
            ))}
          </div>
          </>
        )}
    </div>
    );
  }


render(<App />, document.getElementById('root'));

import React，{useState}来自“React”；
从'react dom'导入{render}；
从“./Hello”导入Hello；
从“./style.css”导入样式
从“./data.json”导入数据
常量应用=（）=>{
const[showConnections，setShowConnections]=useState（false）；
const connex=data.tracks；
返回(
{/*default=closed*/}
{！显示连接
? (
{connex.map（（轨道）=>(
setShowConnections（！showConnections）}
onKeyPress={（）=>setShowConnections（！showConnections）}
role=“按钮”
tabIndex=“0”
>
{tracks.line_number}

{tracks.origin}
- 
{tracks.destination}
{tracks.stop_point}

{轨道。到达时间}

))}
)
: (