Reactjs 映射函数映射比数组中存在的元素更多的元素

Question

我有一个这样的对象数组：

data = [{
            "projectId": 1,
            "projectName": "Progetto 1",
            "clientId": 1,
            "projectDescription": "description1",
            "projectMailingList": "mailingList1",
            "projectCreationDate": "apr 29, 2019",
            "projectVersion": 1
        },
        {
            "projectId": 2,
            "projectName": "Progetto 2",
            "clientId": 1,
            "projectDescription": "description2",
            "projectMailingList": "mailingList2",
            "projectCreationDate": "apr 29, 2019",
            "projectVersion": 1
        },
        {
            "projectId": 3,
            "projectName": "Progetto 3",
            "clientId": 1,
            "projectDescription": "description3",
            "projectMailingList": "mailingList3",
            "projectCreationDate": "apr 29, 2019",
            "projectVersion": 1
        }];

我为此数组使用了映射函数，但它映射的元素比现有元素多。我要做的是为数组的每个元素呈现一个自定义组件，这样就创建了 3 次，而不是创建了 7 次。我试过在构造函数中这样做，检查：

this.data.map(projectId => console.log("Call "));

并且它正确地打印了 3 次 "Call"。然后，在我的渲染方法中我这样做：

return (
      <Slider class="mySlider" ref = {c => (this.slider = c)} {...this.settings}>
        {
          this.data.map(projectId => 
              <ProjectComponent key={projectId} project={projectId} time={this.state.timestamp} originalIndex={ i++ } currentIndex = {this.state.activeSlide}></ProjectComponent>)
        }
      </Slider>
    );

它创建了 7 ProjectComponent 秒。这是为什么？为什么是7？

编辑
这是 ProjectComponent:

export class ProjectComponent extends React.Component {


  constructor(props) {
    super(props);
    this.logger = new LoggerService();
    this.state = {
      project: this.props.project //projects contains the needed data
    };
  }

  componentDidMount() {
    // this.logger.info("------ componentDidMount");
    if(this.props.originalIndex === this.props.currentIndex) {
      this.getProjectData();
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if(prevProps.time !== this.props.time
      && this.props.originalIndex === this.props.currentIndex) {
      this.getProjectData();
    }
  }

  render() {
    var homeService = new HomeService();
    if (this.state.isLoading) {
      return (
        <div className="projectContainer">
          <div className="container-fluid">
            <div className="row">
              <div className="col">
                <div className='sweet-loading'>
                  <ClipLoader
                    sizeUnit={"px"}
                    size={100}
                    color={'#FFECA5'}
                    loading={this.state.isLoading} />
                </div> 
              </div>
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <div className="projectContainer">
            <div className="container-fluid">
             <div className="row">
                <div className="col">
                  <ProjectHeaderComponent header={this.state.project}></ProjectHeaderComponent>
               {<ServiceStatusListComponent functionalities={ homeService.getProjectStatusById(this.props.id)} time={this.props.time} 
                  originalIndex = {this.props.originalIndex} currentIndex = {this.props.currentIndex}></ServiceStatusListComponent>}
                </div>
              </div>
            </div>
        </div>
      );
    }
  }

  getProjectData() {
    this.setState({
      project: {},
      isLoading: false
    });
    var homeService = new HomeService();


    this.setState({
      isLoading:false,
      projectResponse: homeService.getProjectStatusById(this.props.id)
    });
  }

}

Answer 1

移动

this.data.map(projectId => console.log("Call "));

到 render 在 this.data 可以在生命周期中发生变化时提供帮助。如果硬编码 - 没有区别。如果不是，render 是在返回视图之前检查 state/props 的更好位置。

最好也 console.log 一些更有意义的东西。

在这种情况下，它将有助于调试，因为您正在迭代 objects，而不是真正的 projectId 属性。 render 中出现同样的错误。您使用的是 object 的引用而不是标识符 - keying 失败允许 <ProjectComponent/> 重复。

应该有

this.data.map( project =>  
          <ProjectComponent key={project.projectId} project={project}

不需要 <ProjectComponent /> 源 - 组件无法自我复制。这就是为什么它的 parent 需要检查，f.e。 <Slider />（直接parent）和'main'分量。如果 <Slider /> 被渲染了一次，那么只有第二次可能是错误的来源。

因为我们有 <ProjectComponent /> 来源，所以我们看到那里有错误：

在没有通过 id 支持的情况下使用 this.props.id；
不必要创建 homeService 当条件可以导致呈现 'loading'

Reactjs 映射函数映射比数组中存在的元素更多的元素

Reactjs map function mapping more elements than the ones present in array

javascript

reactjs

map-function