Как передать массив объектов из хранилища Redux компоненту в React?

Question

Я работаю над проектом React, в котором у меня есть Массив объектов в магазине, поэтому кто-нибудь, пожалуйста,

Скажите мне, как передать Массив объектов из магазина Redux для реагирования компонента.

В моем проекте у меня есть приложение. js, которое является Parent для этого родителя. У меня есть два Childs, один - Childone

Компонент, другой - Childtwo Component.

Теперь я пытается передать массив объектов из магазина Redux компоненту Childtwo

Это приложение. js

import React from 'react';
import './App.css';
import Childone from './Childone/Childone';
import Childtwo from './Childtwo/Childtwo';

function App() {
  return (
    <div className="App">
      <Childone></Childone>
      <Childtwo></Childtwo>
    </div>
  );
}

export default App;

Это типы данных. js

export const studentsTypesVariable = 'STUDENTS'

Это Dataactions. js

import { studentsTypesVariable } from './Datatypes';

export const studentsActionsVariable = () => {
    return {
        type: studentsTypesVariable
    }
}

Это Datareducer. js

import { studentsTypesVariable } from './Datatypes';

const initialState = {
    data: [{}]
}


const arrayOfStudents = (state = initialState, action) => {
    switch (action.type) {
        case studentsTypesVariable: return {
            ...state,
            data: state.data === 0 ? [{
                name: 'Tesla',
                age: 21
            },
            {
                name: "William",
                age: 24
            }] : state.data
        }
        default: return state
    }
}

export default arrayOfStudents

Это магазин. js

import { createStore } from 'redux';
import  mainReducer  from './Data/Datareducer';


const store = createStore(mainReducer);

export default store

This Чилтво. js

import React from 'react';
import './Childtwo.css';

import { connect } from 'react-redux';


import { studentsActionsVariable } from '../Redux/Data/Dataactions';

const Childtwo = (props) => {
    return (
        <div className='bg-success'><h1>Two</h1>{props.Fun}</div>
    )
}

const mapStateToProps = state => {
    return {
        data: state.data
    }
}

const mapDispatchToProps = dispatch => {
    return {
        Fun: () => dispatch(studentsActionsVariable())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Childtwo)

Answer 1

props.data - это массив, поэтому вы должны выполнить итерацию по нему, чтобы отобразить элементы в нем:

// Childtwo.js

<div className='bg-success'>
  <h1>Two</h1>
  {props.data.map(item => <p>{item.name}</p>)}
</div>

Приведенный выше код будет работать, однако если вы откроете консоль браузера, вы заметите, что React регистрирует предупреждение:

Предупреждение. У каждого дочернего элемента в списке должна быть уникальная «ключевая» опора.

Чтобы React отслеживал изменения в массив, каждый элемент в массиве нуждается в уникальной идентичности. Обычно это достигается с помощью идентификатора:

{props.data.map(item => <p key={item.id}>{item.name}</p>)}

Однако, если уникальный идентификатор недоступен, вы можете использовать позицию элемента в массиве (его индекс), хотя это не так рекомендуется :

{props.data.map((item, index) => <p key={index}>{item.name}</p>)}

Попытка визуализации массива без итерации по нему (т. е. <p>{props.data}</p>) выдает ошибку Objects are not valid as a React child, поскольку в JavaScript массивах являются объекты:

typeof ["an", "array"] // returns "object"`