React.Children.only 期望接收单个 React 元素子 Stuck答案

【问题标题】：React.Children.only expected to receive a single React element child StuckReact.Children.only 期望接收单个 React 元素子 Stuck
【发布时间】：2020-09-14 16:33:57
【问题描述】：

得到一个错误错误：React.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>
      );
    }
  }
}

【问题讨论】：

你能分享FeatureGroup的代码吗？它有prop-types 吗？特别是prop-types 对道具children 施加限制？您可以考虑查看以下关于如何为 prop children 使用 prop 类型的答案：stackoverflow.com/a/42122662/5059657

标签： reactjs maps react-leaflet

【解决方案1】：

我遇到了同样的错误。在我的情况下，带有标签的组件内部有一个空白空间。内部的空白空间 {""} 被认为是另一个组件，并且由于

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

【讨论】：

【解决方案2】：

如果没有看到所有代码，就很难分辨。我有一种刺痛感，您的 this.state.data 在您的构造函数中为空或为空，并且您第一次尝试渲染地图函数时没有返回任何数据。 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>}

【讨论】：

【解决方案3】：

正如错误所述，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>

希望对您有所帮助！

【讨论】：