React Hooks在useEffect中获取父组件prop时告警与值异常问题

问题1：父组件传参语法错误 #

你在父组件调用InvestLinearProgress时用了错误的展开语法：

// 错误写法
<InvestLinearProgress {...props.goalPercentage} />

{...变量}是对象展开语法，props.goalPercentage是数值类型，展开后不会生成goalPercentage属性，导致子组件拿到的props.goalPercentage为undefined，这是你进度值异常的核心原因。
正确写法：

<InvestLinearProgress goalPercentage={props.goalPercentage} />

问题2：子组件状态逻辑冗余 #

你子组件的useState初始化时传入了整个props对象，而非目标属性，同时额外加的useEffect完全没有必要。如果只是需要展示父组件传过来的进度值，不需要在子组件维护本地state，直接使用props值即可，同时也能消除依赖告警。

修复后的子组件完整代码 #

import * as React from 'react';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';

export default function LinearDeterminate(props) {
  return (
    <Box sx={{ width: '100%' }}>
      <LinearProgress variant="determinate" value={props.goalPercentage} />
    </Box>
  );
}

如果确实需要在子组件维护本地state（比如后续要在子组件修改进度值），可以按如下写法修复，同时消除告警：

import * as React from 'react';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
import { useState, useEffect } from 'react';

export default function LinearDeterminate(props) {
  const [progress, setProgress] = useState(props.goalPercentage);

  useEffect(() => {
    setProgress(props.goalPercentage);
  }, [props.goalPercentage]);

  return (
    <Box sx={{ width: '100%' }}>
      <LinearProgress variant="determinate" value={progress} />
    </Box>
  );
}

内容的提问来源于stack exchange，提问作者ziwdig44bugs