Как пройти через массив JavaScript в приложении React, в котором есть объект, и получить счетчик для свойства, имеющего определенное значение - PullRequest
Новая
       28

Как пройти через массив JavaScript в приложении React, в котором есть объект, и получить счетчик для свойства, имеющего определенное значение

0 голосов
/ 17 мая 2018

У меня есть этот массив JavaScript, в котором есть объекты, вложенные в него. 

[{
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "stopped",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "stopped",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  }
]

Я хочу пройти через это и получить число State_Name, равное running, и число stopped. Я знаю, у меня есть 6 running и 2 stopped.

Итак, я хочу, чтобы в моем html было написано «4 запущенных и 2 остановленных». Объект на самом деле больше, и я делаю это в приложении React. У меня есть несколько свойств, где я хочу сделать то же самое. Просто нужен хороший шаблон.

Что является хорошим примером для достижения этой цели?

Ответы [ 4 ]

0 голосов
/ 18 мая 2018

Приведенные выше ответы хороши, но я хотел добавить ответ, используя новый хук жизненного цикла в React 16.3.static getDerivedStateFromProps выполняется после создания экземпляра компонента, а также всякий раз, когда компонент получает новые реквизиты.Таким образом, вы можете проверить, требуют ли какие-либо новые данные, полученные компонентом, повторной визуализации компонента.

Вы возвращаете объект, чтобы указать изменение состояния, или null, чтобы указать, что новые реквизиты не требуют никаких обновлений состояния..

Пожалуйста, нажмите здесь для получения дополнительной информации из официальной документации React. 

class MyApp extends React.Component {
  constructor() {
    super();

    this.state = {
      Num_Running: 0,
      Num_NotRunning: 0
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const results = nextProps.initialData.reduce((accum, item) => ({
      Num_Running: item.State_Name === 'running' ? ++accum.Num_Running : accum.Num_Running,
      Num_NotRunning: item.State_Name !== 'running' ? ++accum.Num_NotRunning : accum.Num_NotRunning
    }), {
      Num_Running: 0,
      Num_NotRunning: 0
    });

    if (results.Num_Running !== prevState.Num_Running || 
        results.Num_NotRunning !== prevState.Num_NotRunning)
      return { ...results };
    else
      return null;
  }

  render() {
    return <div>There are {this.state.Num_Running} running and {this.state.Num_NotRunning} stopped</div>;
  }
}

const arrayOfData = [/* your data */];

ReactDOM.render(
  <MyApp initialData={arrayOfData} />,
  document.getElementById('root') // <div id="root"></div> defined in HTML
);
0 голосов
/ 17 мая 2018

Это классический вариант использования для reduce().Вы можете перебрать один раз, считая объект по пути.

let obj = [{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "running", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "stopped", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "stopped","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }]

let counts = obj.reduce((a, item) => {
    a[item.State_Name] = (a[item.State_Name] || (a[item.State_Name] = 0)) + 1
    return a
},{})

console.log(counts)
0 голосов
/ 18 мая 2018

Я думаю, что это будет работать -: 

var r = {stopped:0,running:0};
x.map((i) => {i.State_Name === 'running' ? r.running++ : r.stopped++;});
0 голосов
/ 17 мая 2018

Вы можете сделать что-то вроде этого: 

const runningCount = records.filter(r => r.State_Name === 'running').length

Для остановки вы можете сделать: 

const stoppedCount = records.filter(r =>r.State_Name === 'stopped').length

Тогда для вашего шаблона просто выполните: 

<span>There are {runningCount} running and {stoppedCount} stopped. </span>

Переменные записи в основном ваш массив.

...