For循环不返回任何React JS

Question

因此，我有一个组件，它必须从0循环到输入值，作为道具

if (props.number !== "" && props.toPow !== "") {
for (let i; i < props.toPow; i++) {
return (
<div>
<span>
{props.number} ^ {i} = {Math.pow(props.number, i)}
</span>
</div>
);
}
} else {
return <h3>Fill in all fields</h3>;
}

但React说：

错误：组件(…(：渲染未返回任何内容。这通常表示缺少返回语句。或者，为了不渲染任何内容，返回无效的

Answer 1

这样的东西可以在中工作

if (props.number !== "" && props.toPow !== "") {
let powers =  Array.from({length:props.toPow}, (_, i) => (
<span>
{props.number} ^ {i} = {Math.pow(props.number, i)}
</span>
));
return <div>{powers}</div>;
} else {
return <h3>Fill in all fields</h3>;
}

这将产生

<div>
<span> .... </span>
<span> .... </span>
<span> .... </span>
</div>

如果您需要

<div>
<span> .... </span>
</div>
<div>
<span> .... </span>
</div>
<div>
<span> .... </span>
</div>

然后你可以做

if (props.number !== "" && props.toPow !== "") {
let powers =  Array.from({length:props.toPow}, (_, i) => (
</div>
<span>
{props.number} ^ {i} = {Math.pow(props.number, i)}
</span>
</div>
));
return <>{powers}</>;
} else {
return <h3>Fill in all fields</h3>;
}

Answer 2

试试这个：(。希望它能起作用。。。我添加了一个空数组，只是将html推入其中，然后返回整个数组。

if (props.number !== "" && props.toPow !== "") {
let arr = []
for (let i = 0; i < props.toPow; i++) {
arr.push(
<div key={i}>
<span>
{props.number} ^ {i} = {Math.pow(props.number, i)}
</span>
</div>
)
}
return arr
} else {
return <h3>Fill in all fields</h3>
}