React实现DnD骰子统计异常：数组n个最大值求和错误排查

核心问题 #

1. 直接修改React State：dice.splice(...)会直接篡改原state数组，违反React state不可变原则，导致后续渲染时数组状态混乱，出现随机数值丢失的情况。
2. splice参数逻辑错误：Math.min(...dice)返回的是数组中的最小值，而splice的第一个参数需要的是起始索引而非数值本身，这会导致错误截取数组，求和结果必然出错。

修复后的代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import { useState } from 'react';

const Dice = () => {
    const [dice, setDice] = useState([1, 1, 2, 2]);

    function rollDice() {
        return Array.from({length: 4}, () => Math.floor(Math.random() * 6) + 1);
    }

    const handleClick = () => {
        setDice(rollDice());
    }

    const rolls = dice.map(die => <span> {die} </span> );

    // 符合DnD规则：复制数组后排序，去掉最小值再求和
    const sortedDice = [...dice].sort((a, b) => a - b);
    const stat = sortedDice.slice(1).reduce((a, b) => a + b, 0);

    return (
        <>
            <button onClick={handleClick}>Roll for stats</button>

            <div>
                Your rolls are: {rolls}
            </div>
            
            <div>
                Your stat is: {stat}
            </div>
        </>
    );
}

export default Dice;

if (document.getElementById('dice')) {
    ReactDOM.render(<Dice />, document.getElementById('dice'));
}

关键修改说明 #

• 用[...dice]复制原state数组，彻底避免直接修改原数据
• 通过排序+slice(1)精准去掉最小的骰子值，完全符合DnD 4d6丢最小的规则
• 给reduce添加初始值0，避免极端场景下的求和错误（代码更严谨）

内容的提问来源于stack exchange，提问作者UNickorn