预加载组件未在循环内渲染元素

Question

我有一个Preact组件，它应该呈现一个数组。数组不是多维的；我正在将2D阵列映射到1D阵列(所以我不能只使用.map()(。无论如何，它只是呈现父div，但在调试时仍在正确迭代。

export const Grid = ({ width, height }: { width: number, height: number }) => {
const [grid] = useState<Cell[]>(initialiseArray({ width, height, fill: () => ({ active: Math.random() < 0.5 }) }));
return (
<div>
{[...Array(width)].map((_, indexX) =>
{
{[...Array(height)].map((_, indexY) => (
<div style={{ backgroundColor: grid[indexX * height + indexY].active ? "red" : "white" }}>
X
</div>
)
)}
}
)}
</div>
);
};

这只是返回CCD_ 3。这里怎么了？

Answer 1

外部映射不返回任何内容。

当您使用.map(() => { ... })(强调大括号(时，您需要显式地将return作为一个值。例如：

const x = foo.map(() => {
<div>foo</div>
});

本例中的x将为空，但以下任意一项都将解决此问题：

const x = foo.map(() => {
return <div>foo</div>
});
const x = foo.map(() =>
<div>foo</div>
);

因此，您需要添加return或删除大括号({}(。

export const Grid = ({ width, height }: { width: number; height: number }) => {
const [grid] = useState<Cell[]>(initialiseArray({ width, height, fill: () => ({ active: Math.random() < 0.5 }) }));
return (
<div>
-     {[...Array(width)].map((_, indexX) => {
+     {[...Array(width)].map((_, indexX) => (
{
[...Array(height)].map((_, indexY) => (
<div
style={{
backgroundColor: grid[indexX * height + indexY].active
? "red"
: "white",
}}
>
X
</div>
));
}
-     })}
+     ))}
</div>
);
};