не получается создать новый colrized массив

Question

Проблема в следующем:

projects -- массив всех проектов (приходит с бэка) newProjectsId -- массив из id новых проектов массивы бывают пустыми нужно чтобы к новым проектам добавилось свойство color: 'true' массив создается, свойства добавляются, только начений в несколько раз больше одинаковых, потому - что несколько раз выполняется (меняются props) как обойти?

Заранее спасибо!

const Projects = ( { projects,  match, newProjectsId } ) => {
  const {t} = useTranslation();

  // if(newProjectsId  ){
  //  projects =  projects.filter((project)=>(
  //      newProjectsId.find(newProjectsId =>(newProjectsId.id !== project.projectId
  //      ))))
  // }

  // console.log(projects && getArrayOfProjectsColorized(projects,newProjectsId));
  let arrayWithNewProjects = [];
  let arrayWithOldProjects = []

for(let i = 0; i <projects.length; i++) {
  for(let j = 0; j<newProjectsId.length; j++){
    if(projects[i].projectId === newProjectsId[j]){
      projects[i].color = 'true';
      arrayWithNewProjects.push(projects[i])
    } else {
      arrayWithOldProjects.push(projects[i])
    }
  }
}
  




  let colorizedArray = [...arrayWithNewProjects, ...arrayWithOldProjects];
console.log(colorizedArray)
  return (
    <ProjectsContainer>
      <Switch>

        <Route exact path={ `${ match.path }` } render={ () =>
          <>
            <TitleMd>{t('projectsPage.projects')}</TitleMd>
            <ProjectsItemsWrapper>
              {projects && colorizedArray.map ( ( project, idx ) =>
                <Fragment key={ idx }>
                  <ProjectCard  projectData={ project } />
                </Fragment>

              ) }
            </ProjectsItemsWrapper>
          </>
        } />

        <Route exact path={ `${ match.path }/:projectKey` } component={ ProjectPage } />
      </Switch>
    </ProjectsContainer>
  );
};

const mapStateToProps = createStructuredSelector ( {
  projects: selectProjects,
  newProjectsId: selectNewProjectsId
} );




export default connect ( mapStateToProps ) ( Projects );

Answer 1

Вы неправильно определяете новые и старые проекты. На каждую итерацию нового id вы заносите каждый проект в массив либо новых либо старых. То есть проект у вас будет добавлен столько раз, сколько у вас длина массива новых ид. А вам нужно проверить новый id во всем массиве проектов сразу и определить, куда его положить.

Второй момент, у вас очень дорогая операция получается. Вы итерируете массив в массиве, тем самым количество итераций будет projects.length * newProjectsId.length.

Если нет возможности сразу получить удобную структуру данных, сделайте сами.

// Одна итерация массива новых ид
const newProjectsIdMap = newProjectsId.reduce((map, id) => {
    map[id] = true;
    return map;
}, {});

const colorizedArray = [];

// Одна итерация массива проектов
projects.forEach(project => {
    if (project.projectId in newProjectsIdMap) {
        project.color = 'true';
        colorizedArray.unshift(project);
    } else {
        colorizedArray.push(project);
    }
});

БЛОГ НА HUSL

не получается создать новый colrized массив

Ответы (1 шт):