做出反应。Children.only预期接收单个React元素子卡住

Question

获取错误错误：反应。Children.only预期接收一个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希望将单个元素作为子元素。当前，给定数组，您有一对多的元素。原型map用于处理数组和生成元素。这可能来自FeatureGroup上指定允许多少子级的道具类型。这并不少见，像react redux中的Provider这样的元素需要一个子元素。至少包装数组的输出。原型使用元素映射：

<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。片段：

<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或空在你的构造函数，第一次你试图呈现你的地图函数不返回任何数据。

首先尝试检查数据中是否有数据。

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

Answer 3

我也犯了同样的错误。在我的例子中，在带有标签的组件内部有一个空白区域。内部的空空间{“”}被视为另一个组件，因为

 <Link href="/"> {" "} // I removed empty space
    <a className="navbar-brand">GitTix</a>
  </Link>