Как представить флажок с данными из двух разных массивов?

Я пытаюсь отобразить некоторые флажки с данными из двух массивов, которые являются идентификатором и именем в одном массиве и количеством/длиной в другом массиве. Бывший:

const count = [[{"1":"91"}],[{"1":"1"}],[{"1":"0"}]]
const type = [{id: "1", name: "iPhone"}, {id: "2",name: "Samsung"}, {id: "3",name: "Huawei"}]

Я попытался использовать функцию карты внутри другой функции карты.

var text=type.map(function(itm,i){
   return [<label key = {itm.id}><input type = "checkbox" key = {itm.id} value = {itm.id} name = "search"/>{itm.name}</label>, (count && count.length > 0 && count.map( item =>
                      item.length > 0 && item.map( el =>
                          Object.keys(el).length > 0 &&
                          Object.keys(el).map(val => <p>{el[val]}</p>)
                      )
                  )[i])];
}).join(' ');

вот так надо представлять. [] — флажок.

[] Iphone (91)
[] samsung (1)
[] huawei (0)

ссылка примера https://stackblitz.com/edit/react-6naael

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

— 30.05.2019 17:11

вот как они были получены из API

— 30.05.2019 17:17

Вы гарантируете, что в count массив, содержащий объект, будет содержать только один объект? Кроме того, почему все объекты внутри count имеют имя свойства 1? Это всегда 1 или может измениться?

— 30.05.2019 17:23

Это всегда будет 1. это не идентификатор или что-то в этом роде, это просто имя.

— 30.05.2019 17:27

если 1 в массиве счетчиков не представляет собой идентификатор, как узнать, какой счетчик относится к какому элементу типа?

— 30.05.2019 17:53

reactjs

30.05.2019 16:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

214

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете прокрутить массив count и добавить новое свойство в массив типов, который содержит общее количество элементов в массиве count на основе id.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id = "root"></div>

<script type = "text/babel">
const count = [[{ "1": "91" }], [{ "1": "1" }], [{ "1": "0" }]]
let type = [{ id: "1", name: "iPhone" }, { id: "2", name: "Samsung" }, { id: "3", name: "Huawei" }]


for (let i = 0; i < count.length; i++) {
  Object.keys(count[i][0]).forEach(key => {
    const index = type.findIndex(x => x.id === key);

    const total = parseInt(count[i][0][key], 10);

    type[index].total ? type[index].total += total : type[index].total = total;
  })
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {

    const check = type.map(item => {
      return (
        <div>
        <input type = "checkbox" id = "check3"/> {`${item.name} (${item.total ? item.total : 0})`}
        </div>
      )
    })
    return (
      <div>
        {check}
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));
</script>

30.05.2019 17:33

Ответ принят как подходящий

Вы можете упростить ситуацию, сначала уменьшив массив массивов объектов в простой массив

const { count } = this.state;
const itemCount = count && count.length > 0 && count.map(c => c[0]["1"])

Затем мы просто берем индекс, когда делаем Array.map() и читаем из itemCount

return (
    <div>
        {type && type.map((type,i) => (
            <label key = {type.id}>
                <input 
                    type = "checkbox" 
                    key = {type.id} 
                    value = {type.id} 
                    name = "search"
                    onChange = {this.handleChangeEvent} 
                    onClick = {this.handleFilter}/>

                      {type.name}
                      ({itemCount[i]})
                    </label>
                ))}
    </div>
)

Рабочий пример https://stackblitz.com/edit/react-184rvv

30.05.2019 17:36