Ожидается, что React.Children. Получит только один дочерний элемент React Stuck

Question

Получить ошибку Ошибка: ожидается, что React.Children получит только один дочерний элемент React. Действительно застрял, кто-нибудь поможет?

  componentDidMount() {
    axios.get(this.props.url).then((res) => {
      const data = res.data._embedded.districts;
      this.setState({ data });
      console.log(this.state.data);
    });
  }
  render() {
    console.log("render");
    if (this.props.terr === "districts") {
      return (
        <FeatureGroup>
          {this.state.data.map((data) => {
            return (
              <GeoJSON
                key={data.name}
                data={data.geometry}
                style={this.myStyle}
              >
                <Popup>{data.name}</Popup>
              </GeoJSON>
            );
          })}
        </FeatureGroup>
      );
    }
  }
}

Answer 1

Как описывает ошибка, FeatureGroup ожидает, что единственный элемент является дочерним. В настоящее время у вас есть от одного до многих элементов с учетом Array.prototype.map, который вы используете для обработки массива и генерации элементов. Вероятно, это исходит от prop-types на FeatureGroup, которые указывают, сколько дочерних элементов разрешено. Это не редкость, такие элементы, как Provider из react-redux, ожидают одного дочернего элемента. Как минимум, оберните вывод Array.prototype.map элементом:

<FeatureGroup>
  <div>
    {this.state.data.map((data) => {
      return (
        <GeoJSON
          key={data.name}
          data={data.geometry}
          style={this.myStyle}
        >
          <Popup>{data.name}</Popup>
        </GeoJSON>
      );
    })}
  </div>
</FeatureGroup>

Или вы можете использовать React.Fragment :

<FeatureGroup>
  <React.Fragment>
    {this.state.data.map((data) => {
      return (
        <GeoJSON
          key={data.name}
          data={data.geometry}
          style={this.myStyle}
        >
          <Popup>{data.name}</Popup>
        </GeoJSON>
      );
    })}
  </React.Fragment>
</FeatureGroup>

Надеюсь, это поможет!

Answer 2

Трудно сказать, не видя всего кода. Меня беспокоит, что ваш this.state.data имеет значение null или пусто в вашем конструкторе, и в первый раз, когда вы пытаетесь визуализировать свою функцию карты, не возвращает никаких данных. componentDidMount будет запущен после того, как он уже был отрисован.

попробуйте сначала проверить, есть ли данные в ваших данных.

{this.state.data.length && <FeatureGroup>
      {this.state.data.map((data) => {
        return (
          <GeoJSON
            key={data.name}
            data={data.geometry}
            style={this.myStyle}
          >
            <Popup>{data.name}</Popup>
          </GeoJSON>
        );
      })}
    </FeatureGroup>}