我怎样才能在 map 中返回 map

Question

我正在尝试使用我编写的代码呈现从 json 数据中收到的数据。 我的所有代码：

import * as React from "react";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import styled from "styled-components";

export default function VerticalTabs({ conditions }) {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box
      sx={{
        flexGrow: 1,
        bgcolor: "background.paper",
        display: "flex",
        height: 224,
      }}
    >
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        sx={{ borderRight: 1, borderColor: "divider" }}
      >
        <Tab label="Account" {...a11yProps(0)} />
        <Tab label="Sertifikalar" {...a11yProps(1)} />
      </Tabs>
      {conditions.map((condition, i) => {
        {
          condition.id === 1 && 
            return (
              <TabPanel value={value} index={0}>
                <h1>{condition.conditionName}</h1>
                {condition.sub_conditions.map((sub, ind) => {
                  <Title>
                    {sub.header}
                    {console.log(sub, "try")}
                  </Title>;
                })}
              </TabPanel>
            );
          }
        }
        {
            condition.id === 2 &&
              return (
                <TabPanel value={value} index={1}>
                  <h1>{condition.conditionName}</h1>
                  {condition.sub_conditions.map((sub, ind) => {
                    <Title>
                     {sub.header}
                      {console.log(sub, "try")}
                    </Title>;
                  })}
                </TabPanel>
              );
            
          
      })}

    </Box>
  );
}

这是我不能做的代码部分：

{conditions.map((condition, i) => {
            {
              condition.id === 1 && 
                return (
                  <TabPanel value={value} index={0}>
                    <h1>{condition.conditionName}</h1>
                    {condition.sub_conditions.map((sub, ind) => {
                      <Title>
                        {sub.header}
                        {console.log(sub, "try")}
                      </Title>;
                    })}
                  </TabPanel>
                );
              }
            }
            {
                condition.id === 2 &&
                  return (
                    <TabPanel value={value} index={1}>
                      <h1>{condition.conditionName}</h1>
                      {condition.sub_conditions.map((sub, ind) => {
                        <Title>
                         {sub.header}
                          {console.log(sub, "try")}
                        </Title>;
                      })}
                    </TabPanel>
                  );
                
              
          })}

我的 h1 标签写入了屏幕，但我的 Title 标签没有写入屏幕。 我不知道如何解决这个问题。 很明显，我也不知道哪里出错了，因为控制台上没有反映错误，但是就是按不下屏幕。

Answer 1

您应该从 map function 中返回组件以渲染错误的代码缩进，但我认为这对您有用

  {conditions.map((condition, i) => {
    
       if(condition.id==1){
        return (
          <TabPanel value={value} index={0}>
            <h1>{condition.conditionName}</h1>
            {condition.sub_conditions.map((sub, ind) => {
              return(<Title>
                {sub.header}
                {console.log(sub, "try")}
              </Title>);
            })}
          </TabPanel>
        );
       }
       if(condition.id==2){
        return (
          <TabPanel value={value} index={1}>
            <h1>{condition.conditionName}</h1>
            {condition.sub_conditions.map((sub, ind) => {
              return(<Title>
               {sub.header}
                {console.log(sub, "try")}
              </Title>);
            })}
          </TabPanel>
        );
       }
            })
      
            }

Answer 2

在 JavaScript 中：

xs.map(x => { f(x) });

…将返回一个undefined的数组！

当你有x => { … }时，块的内容被视为 function 主体。 这意味着您必须在块中有一个return表达式才能返回一个值，例如

xs.map(x => { return f(x) });

你也可以这样写：

xs.map(x => f(x));

…然而，如果没有大括号，这只有在箭头的右侧由单个语句组成时才有可能。

另一件需要指出的事情是，在最外面的map中，您需要重新进入 JSX 上下文以将两个TabPanel元素排列在一起。 您可以使用片段语法来做到这一点。

仔细查看您的代码，看起来您的大括号也可能放错了位置。 我已经重新缩进了您的代码片段并修复了这个问题。

使用块和return s：

{
  conditions.map((condition, i) => {
    return <>{
      condition.id === 1 && (
        <TabPanel value={value} index={0} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) => {
            return (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>);
          })}
        </TabPanel>
      )
    }
    {
      condition.id === 2 && (
        <TabPanel value={value} index={1} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) => {
            return (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>);
          })}
        </TabPanel>
      )
    }</>
  })
}

使用隐式返回：

{
  conditions.map((condition, i) =>
    <>{
      condition.id === 1 && (
        <TabPanel value={value} index={0} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) =>
            (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>)
          )}
        </TabPanel>
      )
    }
    {
      condition.id === 2 && (
        <TabPanel value={value} index={1} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) =>
            (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>)
          )}
        </TabPanel>
      )
    }</>
  )
}

编辑：

从map生成元素时，我们需要为它们添加一个key ，以便 React 在重新加载时可以唯一地识别它们。 通常，索引足以满足此目的。 我已经相应地编辑了我的代码。