Reactjs 我的react组件渲染的子组件太多

我是一个新的反应者，正在努力研究为什么会发生这种情况

我有一个组件，它接受一个数组，映射它，然后为每个元素渲染一个新组件

class CallingPattern extends Component {
  constructor(props) {
    super(props);
    const { serviceId } = this.props.match.params

    this.state = {
      serviceId: serviceId,
    }
  }

  render() {
    return (
      <div>
        <h1>CallingPattern page</h1>
        <h4>Current Journey ServiceID: {this.state.serviceId}</h4>
        <CallingStation serviceId={this.state.serviceId}/>
        <div className="calling-stations">
          // journeyData is a local JSON file 
          {journeyData.service.stops.map((stop, i) => {
            {console.log("mapping")} // logs 8 times (length of array) 
            return (
              <CallingStation
                key={`station-${i}`}
                stopInfo={stop}
                serviceId={this.state.serviceId}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

export default CallingPattern;

类调用模式扩展组件{
建造师（道具）{
超级（道具）；
const{serviceId}=this.props.match.params
此.state={
serviceId:serviceId，
}
}
render（）{
返回(
呼叫模式页面
当前旅程服务ID:{this.state.ServiceID}
//journeyData是一个本地JSON文件
{journeyData.service.stops.map（（stop，i）=>{
{console.log（“mapping”）}//记录8次（数组长度）
返回(
);
})}
);
}
}
导出默认调用模式；

我预计将渲染8个呼叫站（数组中每个呼叫站一个，其.length为8）。这是呼叫站代码：

class CallingStation extends Component {
  render() {
    console.log(`Rendered!`)
    return (
      <div>
         <div>
           Calling Station stop: { this.props.stopInfo ? this.props.stopInfo.location.crs : "" }
         </div>
      </div>
    )
  }
}

export default CallingStation;

类调用站扩展组件{
render（）{
console.log（`Rendered！`）
返回(
呼叫站站：{this.props.stopInfo？this.props.stopInfo.location.crs:}
)
}
}
导出默认呼叫站；

页面上有9个呼叫站（第一个没有'this.props.stopInfo'，但有'this.props.serviceId'

---

有人能帮我理解相关资源的方向吗？

问题就在这里。在您的

渲染
方法中有一个额外的
呼叫站
）

当前旅程服务ID:{this.state.ServiceID}
在
JSON
数据中，
journeyData.service.stops.length
将为17。您可以在渲染方法中使用
console.log（journeyData.service.stops.length）
将其记录到控制台，并删除这一行
在映射之前没有意义。要处理大型JSON数据，最好使用一个好的JSON查看器。我建议使用这个chrome扩展，它太棒了

render（）{
log（journeyData.service.stops.length）
返回(
呼叫模式页面
当前旅程服务ID:{this.state.ServiceID}
//journeyData是一个本地JSON文件
{journeyData.service.stops.map（（stop，i）=>{
{console.log（“mapping”）}//记录8次（数组长度）
返回(
);
})}
);
}
您还可以共享json数据的内容吗？基于您的json数据，您应该有17个站点，看到18个吗？啊，是的，很抱歉，这是第二列的json数据，有17个站点，但我看到18个呈现，页面上的第一列没有this.props.stopInfo（但有this.props.serviceId）
<h4>Current Journey ServiceID: {this.state.serviceId}</h4>
<CallingStation serviceId={this.state.serviceId}/>

render() {
  console.log(journeyData.service.stops.length)
  return (
    <div>
      <h1>CallingPattern page</h1>
      <h4>Current Journey ServiceID: {this.state.serviceId}</h4>
      <div className="calling-stations">
        // journeyData is a local JSON file 
        {journeyData.service.stops.map((stop, i) => {
          {console.log("mapping")} // logs 8 times (length of array) 
          return (
            <CallingStation
              key={`station-${i}`}
              stopInfo={stop}
              serviceId={this.state.serviceId}
            />
          );
        })}
      </div>
    </div>
  );
}