React组件初始化时state数组无法渲染及无限循环问题求助

问题根源分析 #

• 直接在组件渲染阶段调用setRoleAbilities违反React渲染规则，即使加了长度判断，state更新会触发重渲染，可能引发循环，且无法保证state更新时机。
• 初始化后roleabilities长度为1，但渲染逻辑判断length > 1才显示按钮，导致一直显示'Hold up'。
• setRoleAbilities是异步操作，同步console.log无法获取最新state值。

修复后的代码 #

import React, { useState, useEffect } from "react";
import { Grid, Card, CardContent, CardMedia, CardActionArea, Box, ButtonGroup, Button } from '@mui/material';
import abilities from "../../gameobjects/abilities";

function CharacterCard({ character, actionRelay }) {
    const [roleabilities, setRoleAbilities] = useState([])
    
    // 用useEffect初始化state，依赖character.role确保仅在角色变化时更新
    useEffect(() => {
        if (character?.role) {
            const abilitiesArray = [abilities[character.role]];
            setRoleAbilities(abilitiesArray);
        }
    }, [character.role]);

    const buttonsArray = roleabilities.map((role) => (
        <Button
            value={role.name}
            key={role.name} // 用唯一标识替代index作为key
            style={{ backgroundImage: 'url(../../images/buttons/slash.png)' }} // 修正背景图写法
        >
            {role.name} {/* 添加按钮显示文本，否则按钮为空 */}
        </Button>
    ))

    function performAction() {

    }

    return (
        <Card style={{ display: 'flex', flexDirection: 'column' }}>
            <CardActionArea>
                <CardContent>
                    <h2>{character.name}</h2>
                    <Box>
                        <ButtonGroup>
                            {/* 修正长度判断，数组长度大于0就显示按钮 */}
                            {roleabilities.length > 0 ? buttonsArray : 'Hold up'}
                        </ButtonGroup>
                    </Box>
                </CardContent>
            </CardActionArea>
        </Card>
    )
}

export default CharacterCard

关键修复点 #

• 使用useEffect替代渲染阶段的state更新，依赖character.role确保仅在角色变化时执行初始化，避免无限循环和渲染阶段修改state的错误。
• 修正按钮显示的判断条件：从length > 1改为length > 0，匹配初始化后数组长度为1的实际情况。
• 优化map的key值：用role.name（唯一标识）替代数组index，避免组件复用错误。
• 修正Button的背景图写法：background属性需通过style对象的backgroundImage设置，并添加按钮文本，保证按钮可见。
• 增加character?.role可选链判断，避免character未定义时的报错。

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