Реакция условного рендеринга не работает должным образом

Question

У меня проблема с условным рендерингом, когда я делаю запрос get для jsonplaceholder и сохраняю результат в состоянии через setState, так как я oop просматриваю каждый объект и отображаю результат в браузере, Я получаю эту ошибку: "Ничего не было возвращено при рендеринге. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не рендерить, возвращает ноль."

вот фрагмент кода для что:

извлечение результатов из jsonplaceholder

state = {
    people: []
  };
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
      this.setState({ people: response.data });
    });
  }

Отображение его на экране

render() {
    if (this.state.people) {
      this.state.people.map(person => {
        return (
          <React.Fragment>
            <h1>{person.name}</h1>
            <h2>{person.username}</h2>
            <p>{person.email}</p>
          </React.Fragment>
        );
      });
    } else {
      return null;
    }
  }

Answer 1

Вам необходимо вернуть результат, созданный функцией .map, которая является массивом.

     render() {
            if (this.state.people) {
              return <>
              {this.state.people.map(person => 

                  <React.Fragment>
                    <h1>{person.name}</h1>
                    <h2>{person.username}</h2>
                    <p>{person.email}</p>
                  </React.Fragment>

              )}
              </>
            } else {
              return null;
            }
          }

Answer 2

Пустой массив считается верным в javascript (попробуйте запустить !![] в консоли). Поэтому, когда ваш компонент монтируется с пустым массивом в качестве исходного состояния, ваша функция рендеринга не будет ничего возвращать.

Если вы замените if(this.state.people) на if(this.state.people.length > 0), то вы должны получить ожидаемое поведение.