redux 存储更新时组件未按预期重新渲染答案

【问题标题】：component not re-renders as expected when redux store updatesredux 存储更新时组件未按预期重新渲染
【发布时间】：2020-08-30 16:43:26
【问题描述】：

在我的 react-redux 应用程序中，组件之一是根据通过商店作为道具传递的数字来渲染“盒子”组件。该数字由滑块控制组件控制，这肯定会改变商店，正如我使用 redux 开发工具所看到的那样。

在第一次渲染时，组件会按预期在其包装 div 内渲染框，但只要我移动滑块并更改数字，我得到的只是一个框组件。

我尝试将组件更改为有状态组件并使用不同的钩子，但到目前为止没有成功。

这里是组件：

import React from 'react';
import { connect } from 'react-redux'; 
import Box from './Box';

const Grid = ({ boxNumber }) => {

    return(
        <div className='flex flex-wrap'>
            {new Array(boxNumber).fill(null).map((box, i) => <Box key={i} />)}
        </div>
    )
}

const mapStateToProps = (state) => ({
    boxNumber: state.boxNumberReducer.boxNumber
})

export default connect(mapStateToProps)(Grid);

我在这里添加减速器和动作以防万一，即使我不相信这是问题所在，但也许我错过了一些东西。

减速器：

import { SET_BOX_NUMBER } from '../actions/constants';

const initialState = {
    boxNumber: 100
}

export default (state = initialState , {type, payload}) => {
    switch (type) {
        case SET_BOX_NUMBER:
            return {...state, boxNumber: payload};
        default:
            return state;
    }
}

行动：

export const setBoxNumber = (payload) => ({
    type: SET_BOX_NUMBER, payload
})

这里是 box 组件，我使用的是 tailwindcss，所以它基本上是一个高度和宽度为 2rem、边框和白色背景颜色的 div：

import React from 'react';

const Box = () => {
    return(
        <div className='w-8 h-8 border border-black bg-white'>
        </div>
    )
}

export default Box;

编辑：这是正在调度操作的滑块组件：

import React from 'react';
import { connect } from 'react-redux';
import { setBoxNumber } from '../actions';

const Slider = ({ boxNumber, handleChange }) => {
    return(
        <div className='slider p-1 m-1'>
            <div className='flex justify-center'>
                {boxNumber}
            </div>
            <div className='flex justify-center'>
                <input 
                    onChange={handleChange}
                    value={boxNumber}
                    type="range" 
                    step='10'
                    min="10" 
                    max="500" 
                />
            </div>
        </div>
    )
}

const mapStateToProps = (state) => ({
    boxNumber: state.boxNumberReducer.boxNumber
});

const mapDispatchToProps = {
    handleChange: (event) => setBoxNumber(event.target.value)
}

export default connect(mapStateToProps, mapDispatchToProps)(Slider);

【问题讨论】：

你在哪里调度组件的动作？
签入Grid组件，如果更改滑块后正确获取数字，则将日志放入组件内
@zb22 我在日志中正确获取了数字，并添加了滑块组件，正在调度操作
可以加沙箱什么的吗？
我只在 stackblitz 中重新创建了必要的组件，stackblitz.com/edit/react-vuxgve 由于 css，它看起来有点奇怪，但它复制了问题

标签： javascript reactjs redux

【解决方案1】：

您需要在Slider 组件中将event.target.value 转换为Number，因为您将值作为string 传递给new Array(boxNumber)

const mapDispatchToProps = {
    handleChange: (event) => setBoxNumber(Number(event.target.value))
}

【讨论】：