我如何 return 在地图中映射

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

您应该 return 地图函数中的组件来渲染它抱歉代码缩进错误，但我认为这对你有用

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

…将 return 一个 undefined 的数组！

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

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

你也可以这样写：

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

…没有大括号，但是，只有当箭头的 right-hand 侧由单个语句组成时才有可能。

另一件需要指出的事情是，在最外层的 map 中，您需要重新进入 JSX 上下文以将两个 TabPanel 元素排序在一起。您可以使用 fragment syntax.

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

使用块和 returns:

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

使用隐式 returns:

{
  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 在重新加载时可以唯一地识别它们。通常，索引足以满足此目的。我已经相应地编辑了我的代码。

我如何 return 在地图中映射

how can i return map inside map

javascript

render

ecmascript-6

reactjs