React.Children。仅预期接收单个React元素子St uck

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

没有看到所有代码，这很难说。我有点麻木的是，您的this.state.data在构造函数中为null或为空，并且您首次尝试呈现map函数时未返回任何数据。 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>}

Answer 2

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

希望有帮助！