A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object?

Question

[Sergey Vashchenko]

Есть вот такой вот компонент на (React Native):

class PointsMaker extends Component {

    shouldComponentUpdate(nextProps) {
      return nextProps.update
    }

    render() {
        const track = this.props.track;
        const update = this.props.update;

        if (track.length !== 0 && update) {
            this.props.shouldUpdate(false);

              track.forEach((value, key) => {
                if (value.length !== 0)
                return (
                  <VehicleMarker target={key}/>
                );

                else return null;
              });

        }
        else {
            return null;
        }


    }

  }

Но в момент рендера консоль ругается:
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Это странно, ведь до этого я вполне спокойно перебирал массив методом map() внутри render(), правда, этот перебор был обернул еще внутрь . Как быть?

Answer 1

[abberati]

Вы перебираете методом Array.prototype.forEach(), который ничего не возвращает. Да и то, что возвращается из callback'а forEach'а, тоже исчезает в пустоте.

render() {
  const track = this.props.track;
  const update = this.props.update;

  if (track.length !== 0 && update) {
    this.props.shouldUpdate(false);
    return track.map((value, key) => value.length !== 0 ? <VehicleMarker target={key}/> : null;);
  } else {
    return null;
  }
}

Метод forEach() выполняет функцию callback один раз для каждого элемента массива; в отличие от методов every() и some(), он всегда возвращает значение undefined.

©

Comments

[Виталий]

Я бы не возвращал нал вообще, вместо условие ? Решение : нал стоит сделать условие && решение