Reactjs 如何使用useState钩子解决随机化数组问题（React useState）？

我试图找出如何解决一个应用useState钩子概念的颜色框练习。给定一个包含12种不同唯一颜色的数组，最初状态将显示12个具有相应颜色的div。单击按钮后，只有随机选择的div将更改为随机颜色（12种给定颜色中的一种），并在div上标记消息“changed”（已更改）。到目前为止，我能够使颜色框容器显示div上的每种颜色。每次单击时，我都会看到状态更改为随机颜色。但我不知道如何只制作那个随机div来改变颜色并显示消息。此问题是否需要每个颜色的唯一id来跟踪状态的变化

import React, { useState } from 'react';
import ColorBox from './ColorBox';
import {choice} from './colorHelpers';


const ColorBoxes = () => {
   
    const [ boxes, setBoxes] = useState(colors);
    
    const [msg, setMsg] = useState(null);
        
    const clickHandler = () => {
        setBoxes(()=>choice(colors));
        setMsg('changed');    
    };
        

    return (
    <>  
        {colors.map((color,i) =>{
            return(
            <div>
               <ColorBox key={i} color={color} />{color} 
            </div>
            );
        })} 
        <button onClick={clickHandler}>Change Color!</button>    
    </>
    );

};

import React from 'react';
import './ColorBox.css';

const ColorBox = ({ color }) => {
    return <div className="colorBox" style={{ backgroundColor: color }} />;
};

export default ColorBox;


const choice = (arr) => {
    const randIdx = Math.floor(Math.random() * arr.length);
    return arr[randIdx];
};

export { choice };

import React，{useState}来自“React”；
从“./ColorBox”导入ColorBox；
从“./colorHelpers”导入{choice}；
常量颜色框=（）=>{
const[box，setbox]=使用状态（颜色）；
const[msg，setMsg]=useState（null）；
常量clickHandler=（）=>{
挫折（（）=>选择（颜色））；
setMsg（'changed'）；
};
返回(
{colors.map（（color，i）=>{
返回(
{color}
);
})} 
换颜色！
);
};
从“React”导入React；
导入“./ColorBox.css”；
const ColorBox=（{color}）=>{
返回；
};
导出默认颜色框；
常数选择=（arr）=>{
const randIdx=Math.floor（Math.random（）*arr.length）；
返回arr[randIdx]；
};
导出{choice}；

您应该将初始颜色保存在useState中，然后使用

useState

更改随机索引的颜色，检查以下示例：

const colors=[
“#8391B5”，
“#290D11”，
“#0C9ABC”，
“#0E17F4”，
“#97BC89”，
“#6B48F7”，
“#584A35”，
“#669F15”，
“#15FC93”，
“#7C8329”，
“#27D792”，
“#4786C8”，
];
常量颜色框=（）=>{
const[box，setbox]=React.useState(
colors.sort（（）=>Math.random（）-0.5）
);
const[msg，setMsg]=React.useState（Array.from（Array（12））；
常量clickHandler=（索引）=>{
const randomColor=颜色[Math.floor（Math.random（）*12）]；
setbox（（prev）=>prev.map（（x，i）=>（i==index？randomColor:x））；
setMsg（（prev）=>prev.map（（x，i）=>（i==index？“changed！”：x））；
};
返回(
{box.map（（颜色，i）=>(
))}
clickHandler（Math.floor（Math.random（）*12））}>
换颜色！
);
}
const ColorBox=（{color，msg}）=>(
{color}{msg}
);
ReactDOM.render(
,
document.getElementById（“react”）
);

非常感谢您的示例代码。这对我也有用。你认为我可以使用诸如setbox（[…box]，randomColor）之类的扩展运算符而不是使用map吗？欢迎你，是的，如果你将初始状态（数组）更改为object，实际上我认为这会更好，你可以将2
useState
array合并为1个对象。