如何使用 useState 鈎子解決隨機數組問題（React useState）？

Question

我試圖弄清楚如何解決應用 useState 掛鈎概念的顏色框練習。 給定包含 12 個不同的唯一 colors 的數組，最初 state 將顯示 12 個具有相應顏色的 div。 單擊該按鈕后，只有隨機選擇的 div 會更改為隨機顏色（在 12 種給定顏色中），並在該 div 上用“已更改”消息標記該 div。 到目前為止，我能夠制作在 div 上顯示每種顏色的顏色框容器。 每次單擊時，我都會看到 state 變為隨機顏色。 但我不知道如何只制作那個隨機 div 來改變顏色並顯示消息。 此問題是否需要每種顏色的唯一 ID 來跟蹤 state 的變化？

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>