Для l oop ничего не возвращает Реагирует JS

Question

Итак, у меня есть компонент, который должен l oop от 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 говорит:

Ошибка: Компонент (...): ничего не было возвращено при рендеринге. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не отобразить, верните null.

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>
}