Javascript react不在映射函数内呈现JSX

我尝试运行一个循环，然后呈现JSX内容：

console.log正在呈现正确的数据，但返回值不会呈现html内容

const StaticTable = (props) => {
  const [data, setData] = useState({});
  useEffect(() => {
    const { audio, ...newData } = props.data;
    setData(newData);
  }, []);
  return (
    <>
      <Button content="Add" primary />
      <div>
        {Object.keys(data).map((keyName, i) => {
          data[keyName].map((elm) => {
            console.log(elm);
            return (
              <Flex key={i.toString()} gap="gap.small">
                <Header as="h5" content={new Date(keyName).getDay()} />

                <Header as="h5" content="Start Date" />
                <p>{data[keyName]}</p>
                <Flex>
                  <Dropdown
                    items={timeoptions}
                    placeholder="Start Time"
                    defaultValue={elm.start}
                    checkable
                    getA11ySelectionMessage={{
                      onAdd: (item) => `${item} has been selected.`,
                    }}
                  />
                  <div style={{ margin: "10px 0px" }}>
                    <Dropdown
                      items={timeoptions}
                      placeholder="End Time"
                      defaultValue={elm.end}
                      checkable
                      getA11ySelectionMessage={{
                        onAdd: (item) => `${item} has been selected.`,
                      }}
                    />
                  </div>
                </Flex>
                <Header as="h5" content="End Date" />
              </Flex>
            );
          });
        })}
      </div>
    </>
  );
};

const StaticTable=（props）=>{
const[data，setData]=useState（{}）；
useffect（（）=>{
const{audio，…newData}=props.data；
setData（newData）；
}, []);
返回(
{Object.keys（data.map）（（keyName，i）=>{
数据[keyName].map（（elm）=>{
控制台日志（elm）；
返回(
{data[keyName]}

`已选择${item}。`，
}}
/>
`已选择${item}。`，
}}
/>
);
});
})}
);
};

我得到了空的html

const StaticTable=（道具）=>{
const[data，setData]=useState（{}）；
useffect（（）=>{
const{audio，…newData}=props.data；
setData（newData）；
}, []);
返回(
{Object.keys（data.map）（（keyName，i）=>{
返回(
{keyName}

`已选择${item}。`，
}}
/>
`已选择${item}。`，
}}
/>
);
});
})}
);
};

您的外部

.map（）

回调缺少一个

返回值。
const StaticTable = (props) => {
  const [data, setData] = useState({});
  useEffect(() => {
    const { audio, ...newData } = props.data;
    setData(newData);
  }, []);
  return (
    <>
      <Button content="Add" primary />
      <div>
        {Object.keys(data).map((keyName, i) => {
           return (
              <Flex key={i} gap="gap.small">
                <Header as="h5" content={new Date(keyName).getDay()} />

                <Header as="h5" content="Start Date" />
                <p>{keyName}</p>
                <Flex>
                  <Dropdown
                    items={timeoptions}
                    placeholder="Start Time"
                    defaultValue={keyName.start}
                    checkable
                    getA11ySelectionMessage={{
                      onAdd: (item) => `${item} has been selected.`,
                    }}
                  />
                  <div style={{ margin: "10px 0px" }}>
                    <Dropdown
                      items={timeoptions}
                      placeholder="End Time"
                      defaultValue={keyName.end}
                      checkable
                      getA11ySelectionMessage={{
                        onAdd: (item) => `${item} has been selected.`,
                      }}
                    />
                  </div>
                </Flex>
                <Header as="h5" content="End Date" />
              </Flex>

            );
          });
        })}
      </div>
    </>
  );
};