當狀態改變時，React 組件不刷新

Question

我有一個將數組作為參數的 React 組件。 它從這個數組生成一個列表。 在父組件中，數組是一個狀態變量，每當更新該狀態變量時，我都希望將更改反映在子組件中。

發生的事情是組件被渲染一次，但沒有顯示任何更改。

應用程序.js：

import heatData from "./config/heats.json";

export default function App() {
    const [selectedHeat, setSelectedHeat] = useState(heatData.heats.find((x) => x.heatNumber === 1));
    const [selectedHeatNumber, setSelectedHeatNumber] = useState(1);

    const heats = heatData.heats;
    const heatEvents = ["EventA", "EventB", "EventC", "EventD"];

    useEffect(() => {
        const _selectedHeat = heatData.heats.find((x) => x.heatNumber === selectedHeatNumber);
        setSelectedHeat(_selectedHeat);
    }, [selectedHeatNumber]);

    return (
        <div>
            <div>
                <ul>
                    {heats.map((heat, i) => (
                        <li onClick={() => setSelectedHeatNumber(heat.heatNumber)}>
                            Heat #{heat.heatNumber}
                        </li>
                    ))}
                </ul>

                <div>
                    {heatEvents.map((event, i) => (
                        // This renders once but when selectedHeat changes it doesnt re-render
                        <EventCard athletes={selectedHeat.athletes} />
                    ))}
                </div>
            </div>
        </div>
    );
}

正在導入的 heats.json：

{
    "heats": [
        {
            "heatNumber": 1,
            "athletes": ["PersonA, PersonB, PersonC"]
        },
        {
            "heatNumber": 2,
            "athletes": ["PersonD, PersonE, PersonF"]
        }
    ]
}

EventCard.js：

export default function EventCard({ athletes }) {
    const [userPrediction, setUserPrediction] = useState([...athletes]);
    
    // Add methods to manipulate userPrediction

    return (
        <table>
            <tbody>
                {userPrediction.map((athlete, i) => (
                    <tr key={i}>
                        <td>{athlete}</td>
                        <td>Up</td>
                        <td>Down</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

這是過程：

• 導入heats.json
• 循環heats以生成菜單，單擊該菜單時設置當前加熱
• 打印事件列表並傳遞當前熱火的運動員

問題是點擊按鈕會改變熱量，但 EventCard 中的運動員不會更新。

Answer 1

你應該這樣添加useEffect您EventCard.js部件，因為你設置的state與運動員只有第一次和狀態不更新當道具的變化，所以你應該保持跟蹤變化props ，然后更新state相應。 代碼沙盒

useEffect(() => {
    setUserPrediction([...athletes]);
  }, [athletes]);

或者您可以直接使用athletes道具，例如：

{athletes.map((athlete, i) => (
          <tr key={i}>
            <td>{athlete}</td>
            <td>Up</td>
            <td>Down</td>
          </tr>
        ))}