React useState 没有正确更新我的子组件道具的 state

Question

I spent days trying to figure out what's wrong with my code and in doing so, tried multiple solutions/suggestions but no luck.

UPDATE Reproduced the issue in the following codesandbox https://codesandbox.io/s/nostalgic-pond-u130qs?file=/src/selectTracker.tsx

Summary of the issue I have a parent component with 2 children. The first child is responsible for capturing user's selection from a Select and invoking a setState wrapper in the parent. The parent will then pass the user's selection as props to the second child which will use it to fetch data from an API and then display it in a table. The issue is that, the table will not re-render when the state changes but only when there is another selection. Meaning, I select value A, nothing happens, then I select value B, then the table renders data based on value A. I know React states handling is asynchronous but that should not explain the bug I'm facing. Happy to hear your suggestions/potential fixes.

Parent Component

 const MainComponent = () => { const [trackerSetup, setTrackerSetup] = useState<TrackerSetup>(); return ( <> <Container maxWidth="lg"> <Grid direction="row" container alignItems="center" justifyContent="center" spacing={2} marginTop={5} > <Grid item xs={6}> <AddTrackerSetupComponent /> </Grid> <Grid item xs={6}> <SelectTrackerSetupComponent setTrackerSetup={setTrackerSetup} /> </Grid> </Grid> {trackerSetup? ( <TrackerTableComponent trackerSetup={trackerSetup} /> ): ( <span>Select a tracker setup</span> )} </Container> </> ); }; export default MainComponent;

Child 1

 interface SelectTrackerSetupComponentProps { setTrackerSetup: any; } const SelectTrackerSetupComponent = ( props: SelectTrackerSetupComponentProps ) => { const [existingTrackerSetups, setExistingTrackerSetups] = useState<TrackerSetup[]>(); const [ selectedExistingTrackerSetupIndex, setSelectedExistingTrackerSetupIndex, ] = useState(0); useMemo(() => { const existingSetups = JSON.parse( localStorage.getItem("trackerSetup"); ) as TrackerSetup[]; setExistingTrackerSetups(existingSetups), }; []). return ( <> {existingTrackerSetups && existingTrackerSetups?length > 0. ( <FormControl fullWidth> <InputLabel id="existingSetups">Select an Existing Setup</InputLabel> <Select labelId="existingSetups" id="existingSetups-select" label="Existing Setups" value={selectedExistingTrackerSetupIndex} onChange={(e) => { setSelectedExistingTrackerSetupIndex(Number(e.target;value)). props.setTrackerSetup( existingTrackerSetups[Number(e.target;value)] ). }} > {existingTrackerSetups:map((trackerSetup, TrackerSetup. index) => { return ( <MenuItem key={trackerSetup.name} value={index}> {trackerSetup;name} </MenuItem> ): })} </Select> </FormControl> ). ( <span>Loading.;</span> )} </> ); }; export default SelectTrackerSetupComponent;

Child 2

 interface TrackerTableComponentProps { trackerSetup: TrackerSetup; } const TrackerTableComponent = (props: TrackerTableComponentProps) => { const [trackers, setTrackers] = useState<Tracker[]>(); const [loading, setLoading] = useState(false); useEffect(() => { const loadTrackerData = async () => { setLoading(true); const fetchedTrackers = await getTrackerObject( props.trackerSetup.trackers ); console.log("Displaying the following trackers ", fetchedTrackers); setTrackers(fetchedTrackers); }; loadTrackerData(); setLoading(false); }, []); return ( <> {?loading: ( <TableContainer component={Paper}> <Table sx={{ minWidth. 650 }} aria-label="simple table"> <TableHead> <TableRow> <TableCell>Tracker ID</TableCell> <TableCell>FW version</TableCell> <TableCell>battery level</TableCell> <TableCell>Actions</TableCell> </TableRow> </TableHead> <TableBody> {trackers && trackers:map((tracker. Tracker) => { console:log("Table, displaying tracker "; tracker). return ( <TableRow key={tracker:id} sx={{ "&,last-child td: &:last-child th": { border. 0 } }} > <TableCell component="th" scope="row"> {tracker.id} </TableCell> <TableCell>{tracker.fwVersion}</TableCell> <TableCell>{tracker.batteryLevel;toString()} %</TableCell> <TableCell> <Button variant="contained" color="success" size="small" > Update FW </Button> </TableCell> </TableRow> ): })} </TableBody> </Table> </TableContainer> ). ( <span>Loading..;</span> )} </> ); }; export default TrackerTableComponent;

Answer 1

I tried to reproduce your issue with codesandbox. There was a small and simple warning inside TrackerTableComponent: React Hook useEffect has a missing dependency: 'props.trackerSetup.trackers'. Either include it or remove the dependency array. TrackerTableComponent: React Hook useEffect has a missing dependency: 'props.trackerSetup.trackers'. Either include it or remove the dependency array. within your useEffect.

useEffect(() => {
  const loadTrackerData = async () => {
    setLoading(true);
    const fetchedTrackers = await getTrackerObject(
      props.trackerSetup.trackers
    );
    console.log("Displaying the following trackers ", fetchedTrackers);
    setTrackers(fetchedTrackers);
  };
  loadTrackerData();
  setLoading(false);
}, []); // <- Here

If you change it to [props.trackerSetup.trackers] table will reflect changes as expected. But. In your SelectTrackerSetupComponentProps you are loading items from localstorage and setting them to setExistingTrackerSetups , but you also have a selectedIndex there and you component renders with selected 0 item loaded. But you didnt call the passed props.setTrackerSetup to make the table render the actual data when initially loaded. So changes to SelectTrackerSetupComponent :

Not important but still better than "any" type

interface SelectTrackerSetupComponentProps {
  setTrackerSetup: React.Dispatch<SetStateAction<TrackerSetup>>;
}

Extracted method from "props" object, i just prefer to extract everything from passed props.

const { setTrackerSetup } = props;

Changed your useMemo to useEffect due to logically it suits better

useEffect(() => {

  // change it back, i used dummy data from constant
  const existingSetups =
    /*JSON.parse(
    localStorage.getItem("trackerSetup")!
  ) as TrackerSetup[];*/
    TRACKER_SETUPS;

  setExistingTrackerSetups(existingSetups);
  // Added to prevent future possible bugs
  setSelectedExistingTrackerSetupIndex(0); 
  // Added to tell parent component that actual item is now selected
  setTrackerSetup(existingSetups[0]);
}, [setTrackerSetup]);

Update: After codesandbox provided the root issue of errors was found:

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    let list: Tracker[] = [];
    // Error is just below...
    props.trackerSetup.trackers.forEach(async (tracker) => {
      const fetchedTracker = await getMockData();
      console.log(fetchedTracker);
      list.push({
        id: "tracker ID",
        fwVersion: fetchedTracker.data.fw_version,
        batteryLevel: fetchedTracker.data.battery_level
      });
    });
    setTrackers(list);
    setLoading(false);
  };
  fetchData();
}, []);

props.trackerSetup.trackers.forEach(async (tracker) => { will not work in that way.

Correct code:

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    // CHANGE: Foreach is not working nice with async.
    // Converting to promises instead.
    const promises = props.trackerSetup.trackers.map(async (tracker) => {
      const fetchedTracker = await getMockData();
      console.log(fetchedTracker);
      const result: Tracker = {
        // CHANGE: That will cause a duplicate key error. Changed to random
        id: (Math.random() * (10000 - 1) + 1).toString(),
        fwVersion: fetchedTracker.data.fw_version,
        batteryLevel: fetchedTracker.data.battery_level
      };
      return result;
    });
    const list = await Promise.all(promises);
    setTrackers(list);
    setLoading(false);
  };
  fetchData();
  // CHANGE: You didnt set needed item in depsArray as i described in answer
  // React will not re-execute this hook on trackers changed without it
}, [props.trackerSetup.trackers]);