0

我有一个将数组作为参数的 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"]
        }
    ]
}

事件卡.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 中的运动员不会更新。

4

1 回答 1

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>
        ))}
于 2020-11-04T12:53:42.743 回答