Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2019, 22:58
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Компонент React JS
В компоненте отрисовываю объект из массива, вставляя значения строк объекта в DOM дерево. Для выделения каждого объекта из массива использую .map Такой вопрос, как разбить строку в объекте на значения, что бы каждое значение из строки объекта можно было отдельно показывать.
array = [
 {
 ...object,
 name: "Name1, Name, Name3"
 }
];


import React from 'react';
//redux
import { connect }  from 'react-redux';

const Projects = ({ projects }) => {
	return (
		<div className="container">		
     {
        projects.map((project) => {
          return (
            <div key={project.id}>
              <div>
                <h3>{project.label}</h3>
                <img src={project.image} alt="" />
                <div>
                  <p>{project.text}</p>
                </div>
                <ul>
                 <li>{project.name}</li>
                  <li>{project.name}</li>
                  <li>{project.name}</li>
                </ul>
              </div>
            </div>
          )
        })
      }		
		</div>
	)
};

const mapStateToProps = ({ projects }) => {
    return { projects };
};

export default connect(mapStateToProps)(Projects);

Последний раз редактировалось NeonMan, 09.04.2019 в 23:01.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2019, 07:24
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

array = [
 {
 ...object,
 name: "Name1, Name, Name3".split(/,\s/)
 }
];

<ul>
    {project.name.map(text => <li>{text}</li>)}             
</ul>
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2019, 12:26
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Сообщение от destus Посмотреть сообщение
array = [
 {
 ...object,
 name: "Name1, Name, Name3".split(/,\s/)
 }
];

<ul>
    {project.name.map(text => <li>{text}</li>)}             
</ul>
Не подходит, пишет что Cannot read property 'map' of undefined

projects: [
    {
      id : 1,
      name: "name1, name2, name3".split(/,\s/)
    }
  ]
};


import React from 'react';
//redux
import { connect }  from 'react-redux';
//css
import './projects.css';

const Projects = ({ projects }) => {
	return (
    <ul>
        {
          projects.name.map((text) => {
            return (
              <li>{text}</li>  
              )
          })
        }
    </ul>
	)
};
const mapStateToProps = ({ projects }) => {
    return { projects };
};
export default connect(mapStateToProps)(Projects);
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2019, 13:27
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

потому что данные надо хранить в нормализованном состоянии, и не писать унылые велосипеды
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2019, 13:34
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Сообщение от SuperZen Посмотреть сообщение
потому что данные надо хранить в нормализованном состоянии, и не писать унылые велосипеды
Можно пример таких данных?

а строку иногда на значения нужно разбивать, если их нужно перечислить в разных тегах. Вот только не понятно как поступать с id, ведь key={array.id} идет в тег, где отрисовываем весь объект, а тут при разделении строки на значения получается опять id нужно будет присваивать тегам куда идут эти значения.

import React from 'react';
//redux
import { connect }  from 'react-redux';
//css
import './projects.css';

const Projects = ({ projects }) => {
	return (
		<div>
      {
        projects.map((project) => {
          return (
            <div key={project.id}>
              <div className="card mb-3">
                <h3>{project.title}</h3>
                <img src={project.image} alt="" />
                <div className="card-body">
                  <p>{project.text}</p>
                </div>
                <ul>
                  {
                    project.skills.map((skill) => {
                      return (
                        <li>{skill}</li>
                      )                         
                    })                        
                  }                                 
                </ul>
              </div>
            </div>
          )
        })
      }
		</div>
	)
};

const mapStateToProps = ({ projects }) => {
    return { projects };
};
export default connect(mapStateToProps)(Projects);



Вот тут как поступить с unique key?
{
   project.skills.map((skill) => {
      return (
        <li>{skill}</li>
      )                         
   })                        
  }

Последний раз редактировалось NeonMan, 10.04.2019 в 13:43.
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2019, 14:10
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

let obj = {
  projects: [
    {
      id: 1,
      name: [
        "name1",
        "name2",
        "name3"
      ]
    }
  ]
}


project.skills.map((skill) => <li key={skill}>{skill}</li>)


у тебя будет дерево (VDOM) project.id -> skills
ну и соответственно если есть несколько project.id они не будут пересекаться

1- (прожект)
1.1 - скил1
1.2 - скил2
2- (прожект)
2.1 - скил1
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2019, 14:52
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

[quote=SuperZen;506297]
let obj = {
  projects: [
    {
      id: 1,
      skills: [
        "skill1",
        "skill2",
        "skill3"
      ]
    }
  ]
}


project.skills.map((skill) => <li key={skill}>{skill}</li>)


не очень понимаю откуда в key={skill} возмется id если в skills [] нет такой строчки. И я так понимаю лучше хранить данные массив в массиве, если нужно, а не перечислять в строке? тогда такая приписка не нужна будет?
skills: skill1, skill2, skill3".split(/,\s/)

Достаточно будет написать так? project.skills.map
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2019, 21:19
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

не понятно, что в итоге должно получиться, откуда появляется эта строка, массив и т.д.

может быть ) просто надо про map прочитать внимательнее

project.skills.map((skill, id) => <li key={id}>{id} - {skill}</li>)


зачем это все?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
Ищем frontend-разработчика (react js) в небольшой международный проект Варвара Работа 0 31.05.2016 13:10
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57
Нужен фронтенд разработчик со знанием React JS удаленно на проект sergeda Работа 0 13.11.2015 18:40
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28