如何将useState挂钩用于随机化数组问题(React useState)

Question

我正试图找出如何解决应用useState钩子概念的颜色框练习。给定一个包含12种不同唯一颜色的数组，最初该状态将显示具有相应颜色的12个div。单击按钮后，只有随机选择的div将变为随机颜色(在12种给定颜色中(，并用消息"标记该div；"已更改"；到目前为止，我已经能够制作一个显示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 };

Answer 1

您应该将初始颜色保存在useState中，然后使用useState更改随机索引的颜色，请查看以下示例：

const colors = [
"#8391B5",
"#290D11",
"#0C9ABC",
"#0E17F4",
"#97BC89",
"#6B48F7",
"#584A35",
"#669F15",
"#15FC93",
"#7C8329",
"#27D792",
"#4786C8",
];
const ColorBoxes = () => {
const [boxes, setBoxes] = React.useState(
colors.sort(() => Math.random() - 0.5)
);
const [msg, setMsg] = React.useState(Array.from(Array(12)));
const clickHandler = (index) => {
const randomColor = colors[Math.floor(Math.random() * 12)];
setBoxes((prev) => prev.map((x, i) => (i === index ? randomColor : x)));
setMsg((prev) => prev.map((x, i) => (i === index ? "changed!" : x)));
};
return (
<React.Fragment>
{boxes.map((color, i) => (
<ColorBox key={i + color} color={color} msg={msg[i]} />
))}
<button onClick={() => clickHandler(Math.floor(Math.random() * 12))}>
Change Color!
</button>
</React.Fragment>
);
}
const ColorBox = ({ color, msg }) => (
<div className="colorBox" style={{ backgroundColor: color }}>
{color} {msg}
</div>
);
ReactDOM.render(
<ColorBoxes />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>