map函数多次插入相同的数据(React Redux)

Question

我正在尝试使用React Redux实现React Accordion项目。

这是我的Reducer代码，其中我有一个映射函数来对每个id:逐个执行操作

import * as actionTypes from '../actions/actions';
const initialState = {
active: [
{ id: 1, status: false },
{ id: 2, status: false },
{ id: 3, status: false },
{ id: 4, status: false }
]
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case actionTypes.ACTIVE_STATE:
return {
...state,
active: state.active.map((acdnobj) => {
const panel = document.querySelector(`.panel-${acdnobj.id}`);
return {
...acdnobj,
acdnobj: acdnobj.id === parseInt(action.id) ? (
acdnobj.status = true,
panel.style.maxHeight = panel.scrollHeight + "px"
) : (
acdnobj.status = false,
panel.style.maxHeight = '0px'
)
}
}) 
}
default:
}
return state; 
}
export default reducer;

这是我的Accordion，我有另一个增加id号的地图功能：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionTypes from '../store/actions/actions';
class Accordion extends Component {
localDispatch = (key) => {
this.props.expandAccordion(key.target.value);
}
render() {
return (
<div>
{this.props.accordions.map((accordion, index) => {
return (
<div key={index}>
<button value={ index + 1 } className={`accordion ${accordion.status}`}
onClick={this.localDispatch.bind(this)}>
{this.props.title}
</button>
<div className={`panel panel-${accordion.id}`}>
{this.props.content}
</div>
</div>
)
})}
</div>
);
}
}
const mapStateToProps = (state) => {
return {
accordions: state.data.active
};
}
const mapDispatchToProps = (dispatch) => {
return {
expandAccordion: (key) => dispatch({type: actionTypes.ACTIVE_STATE, id: key})
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Accordion);

在App.js组件中，我有另一个从excel文件中获取数据的映射函数：

if(list.length > 0) {
accordionDIV = list[0].map((d, index) => (
<Accordion _key={index}
title = {
<Table>
<tr key={d.ID}>
<td>{d.ID}</td>
<td>{d.Mail}</td>
<td>{d.Name}</td>
<td>{d.PhoneNo}</td>
<td>{d.City}</td>
<td>{d.Date}</td>
<td>{d.Time}</td>
</tr>
</Table>
}
content = {
<div>
<p className="header">
<span style={{color:"#3c67a5"}}>Shipping Address:</span>
292 Naqashband Colony, Near rabbania Mosque, Multan
</p>
<Table size="sm" className="content">
<thead>
<tr>
<th style={{width:"10%"}}></th>
<th style={{width:"15%"}}>Article No</th>
<th style={{textAlign:"left", width:"30%"}}>Product Name</th>
<th style={{width:"15%"}}>Quantity</th>
<th style={{width:"15%"}}>Price</th>
<th style={{width:"20%"}}>Total Amount</th>
</tr>  
</thead>
<tbody>
{list[1].map((c) => 
c.ID === d.ID ? (
<tr key={c.ID}>
<td> <FontAwesomeIcon icon={faTrashAlt} size="xs" className="icon" /> </td>
<td>{c.ArticleNo}</td>
<td style={{textAlign:"left"}}>{c.ProductName}</td>
<td>{c.Quantity}</td>
<td>{c.Price}</td>
<td>{c.TotalAmount}</td>
</tr>
) : null
)}
</tbody>
</Table>
</div>
}
/>
))
}

问题是，在运行时，我对同一数据有多个手风琴。

建议我现在可以做些什么来解决这个问题。

Answer 1

import * as actionTypes from '../actions/actions';
const initialState = {
active: [
{ id: 1, status: false },
{ id: 2, status: false },
{ id: 3, status: false },
{ id: 4, status: false }
]
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case actionTypes.ACTIVE_STATE:
let newActive = [...state.active];
newActive = newActive.map((acdnobj) => {
const panel = document.querySelector(`.panel-${acdnobj.id}`);
panel.style.maxHeight = (acdnobj.id === parseInt(action.id)) ? panel.scrollHeight + "px" : '0px';
return {
...acdnobj,
status: acdnobj.id === parseInt(action.id)
}
}) 

return {
...state,
active: newActive
}
default:
}
return state; 
}
export default reducer;

这可能是Javascript上的数组可变问题，因此您可以使用上面的代码或尝试使用immutable.js