如何将对象数组从Redux存储传递到React中的组件

Question

我正在做一个React项目，因为我在商店里有一个对象数组，所以有人请

告诉我如何从Redux存储传递对象数组来反应组件。

在我的项目中，我有一个App.js，它是该Parent的Parent。我有两个Child，一个是Childone

组件另一个是Childtwo组件。

现在我正试图将一个对象数组从Redux商店传递到Childtwo组件

这是App.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;

这是Datatypes.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

这是store.js

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

const store = createStore(mainReducer);
export default store

我是Chiltow.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为了跟踪数组的更改，数组中的每个项都需要一个唯一的标识。通常使用ID:实现

{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"`