Question

我有一组由API带来的组，并显示在表格上。

<g>
   <polygon id="start" points="240 0, 247.5 5, 247.5 -5" ="rotate(180, 240, 0)"></polygon>
   <polygon id="end" points="1038 694.32, 1045.5 699.32, 1045.5 689.32" transform="rotate(235.4921735667412, 1038, 694.32)"></polygon>
   
   <path d="M240,0L330,0L402,29.82L507,158.32L522,174.82L690,320.94L720,320.94L792,372.32L819,405.52L825,411.92L852,445.48L936,556.32L987,618.96L990.0000000000001,624.5L1038,694.32" ></path>
</g>

在此表中，我有一列具有一个启用和禁用组的按钮，该按钮调用此操作：

return(
  <Table
     data={props.data}
    columns={columns}
    noHeader={true}
   />
)

 const mapStateToProps = state => ({
    data: state.Table.arrayGroups,
})

在此操作上，我基本上是在获取数据数组并在其中更改一个值..并像这样更新arrayGroups ..

 export const handleStatus = (data, status, id, endPoint, ActionType) => {

        let index = data.findIndex( array => array.id === id);

        console.log(index)
        if (status) {
            console.log('entrei disable')
            data[index].enable = false
            console.log(data)
            return dispatch => {
                httpPut(`${endPoint}/${id}/disable`)
                    .then(resp => {
                        return [
                            dispatch({
                                type: ActionType,
                                payload: data
                            })
                        ]
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
        else {
            console.log('entrei enable')
            data[index].enable = true
            return dispatch => {
                httpPut(`${endPoint}/${id}/enable`)
                    .then(resp => {
                        return [
                            dispatch({
                                type: ActionType,
                                payload: data
                            })
                        ]
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    }

问题是：在执行此操作后，表将连续显示先前的数组数据

Answer 1

react-redux连接是PureComponent。这意味着除非道具更改，否则不会触发重新渲染。并且执行浅层的相等性和引用检查。

由于您要对数据进行突变，因此不会触发更新。

克隆数据对象并更新它

 export const handleStatus = (data, status, id, endPoint, ActionType) => {

        let index = data.findIndex( array => array.id === id);

        console.log(index)
        const newData = [...data]; // shallow cloning data
        if (status) {
            console.log('entrei disable')
            newData[index].enable = false
            console.log(newData);
            return dispatch => {
                httpPut(`${endPoint}/${id}/disable`)
                    .then(resp => {
                        return [
                            dispatch({
                                type: ActionType,
                                payload: newData
                            })
                        ]
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
        else {
            console.log('entrei enable')
            newData[index].enable = true
            return dispatch => {
                httpPut(`${endPoint}/${id}/enable`)
                    .then(resp => {
                        return [
                            dispatch({
                                type: ActionType,
                                payload: newData
                            })
                        ]
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    }

反应更新数组的数据，但未显示更改

1 个答案: