[英]react not rendering JSX inside map function
我正在嘗試運行一個循環然后呈現 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
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>
</>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.