Question

我有一个React组件，该组件将数组作为参数。从该数组生成一个列表。在父组件中，数组是一个状态变量，每当该状态变量更新时，我都希望更改反映在子组件中。

发生的事情是该组件只渲染了一次，但没有显示任何更改。

App.js：

cell   input     out    type      fun            level
AI20   A1,A2      Z     comb    ((A1A2))           2
INV    I1         ZN    comb    (!I1)              1  
BUF  A1,A2,A3,B1  Z     comb    (!(((A1A2)A3)B1))  4
CLK    C          Z     seq      Cq                1
XOR    A1,A2,B1   Z     comb    (((A1A2)B1)        3
IAD    A1,A2,A3   Z     comb    (!((A1A2)A3))      3
INV    I1         ZN    comb    (!I1)              1
DFk    C,Cp       Q     seq      IQ                1
IA2    A1,A2,A3   Z     comb    ((!A1A2)A3)        3
XOR    A1,A2,B1   Z     comb    (((A1A2)B1)        3
INV    I1         ZN    comb    (!I1)              1

正在导入的heats.json：

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>
    );
}

EventCard.js：

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

流程如下：

导入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上方产生一个菜单，单击该菜单可设置当前热量
打印事件列表并传递运动员当前的热量

问题在于单击按钮会改变热量，但EventCard中的运动员不会更新。

Answer 1

您应该将此useEffect添加到EventCard.js组件中，因为您是第一次将state设置为运动员，并且道具更改时状态不会更新，因此您应该跟踪props中的更改，然后相应地更新state。 CodeSandBox

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

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

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

状态更改时，React组件不刷新

1 个答案: