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

Question

我花了几天时间试图找出我的代码有什么问题，并在这样做时尝试了多种解决方案/建议，但没有运气。

更新在以下代码和框中重现了问题https://codesandbox.io/s/nostalgic-pond-u130qs?file=/src/selectTracker.tsx

问题总结我有一个有 2 个孩子的父组件。 第一个孩子负责从 Select 中捕获用户的选择，并在父级中调用 setState 包装器。 然后，父母将用户的选择作为道具传递给第二个孩子，第二个孩子将使用它从 API 获取数据，然后将其显示在表格中。 问题是，当 state 更改时，表格不会重新渲染，但只有在有另一个选择时才会重新渲染。 意思是，我 select 值 A，没有任何反应，然后我 select 值 B，然后表格根据值 A 呈现数据。我知道 React 状态处理是异步的，但这不应该解释我面临的错误。 很高兴听到您的建议/可能的修复。

父组件

 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;

孩子 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;

孩子 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

我试图用codeandbox重现你的问题。 TrackerTableComponent 中有一个小而简单的警告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. 在你的 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

如果将其更改为[props.trackerSetup.trackers]表将按预期反映更改。 但。 在您的SelectTrackerSetupComponentProps中，您正在从 localstorage 加载项目并将它们设置为setExistingTrackerSetups ，但您也有一个 selectedIndex ，并且您的组件渲染时加载了选定的 0 项目。 但是您没有调用传递的props.setTrackerSetup来使表格在最初加载时呈现实际数据。 所以更改SelectTrackerSetupComponent ：

不重要但仍然比“任何”类型好

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

从“道具”object 中提取方法，我只是更喜欢从传递的道具中提取所有内容。

const { setTrackerSetup } = props;

将您的 useMemo 更改为 useEffect，因为从逻辑上讲它更适合

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

更新：在codesandbox提供后发现错误的根本问题：

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) => {不会以这种方式工作。

正确代码：

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