[英]For loop returns nothing React JS
So, I have a component which must loop from 0 to entered value, given as a prop所以,我有一个组件,它必须从 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>;
}
but React says:但反应说:
Error: Component(...): Nothing was returned from render.错误:组件(...):渲染没有返回任何内容。 This usually means a return statement is missing.这通常意味着缺少 return 语句。 Or, to render nothing, return null.或者,不渲染任何内容,返回 null。
Just try this:).试试这个:)。 Hope it will work... I have added an empty array and just pushing the html into that and then returning whole array.希望它能起作用...我添加了一个空数组,然后将 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>
}
Something like this will work像这样的东西会起作用
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>;
}
That would produce那会产生
<div>
<span> .... </span>
<span> .... </span>
<span> .... </span>
</div>
If you need如果你需要
<div>
<span> .... </span>
</div>
<div>
<span> .... </span>
</div>
<div>
<span> .... </span>
</div>
Then you can do然后你可以做
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>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.