Question

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

我有一个组件，它接受一个数组，将其映射，然后为每个元素呈现一个新组件

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;

我希望呈现8个CallingStation（在数组中每个为一个，长度为8）。这是CallingStation的代码：

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;

在页面上，有9个CallingStation（第一个没有“ this.props.stopInfo”，但没有“ this.props.serviceId”。

任何人都可以帮助我理解或指出相关资源的方向吗？

Answer 1

问题在这里。您的CallingStation方法中有一个额外的render：）

<h4>Current Journey ServiceID: {this.state.serviceId}</h4>
<CallingStation serviceId={this.state.serviceId}/>

Answer 2

在JSON数据中，journeyData.service.stops.length将为17。您可以在渲染方法中使用console.log(journeyData.service.stops.length)将其登录到控制台，并删除<CallingStation serviceId={this.state.serviceId}/>这行，在映射之前有意义。要使用大型JSON数据，最好使用一个好的json查看器，我建议使用此chrome扩展名，它非常棒JSON viewer Awesome。

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>
  );
}

我的react组件正在渲染1个太多的子组件

2 个答案: