map 函數多次插入相同的數據（React-Redux）

Question

我正在嘗試使用 React-Redux 實現 React Accordion 項目。

這是我的Reducer代碼，其中我有一個 map 函數可以對每個 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;

這是我的手風琴，我有另一個地圖功能來增加 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