反应不在地图功能内渲染 JSX答案

【问题标题】：react not rendering JSX inside map function反应不在地图功能内渲染 JSX
【发布时间】：2021-05-25 17:46:03
【问题描述】：

我正在尝试运行一个循环然后渲染 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>
    </>
  );
};

我有空的html

【问题讨论】：

您的外部.map() 回调缺少return。

标签： javascript reactjs

【解决方案1】：

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

【讨论】：