在 useEffect() 中返回一个 prop

Question

我是反应钩子的新手，我试图从我的 useEffect 钩子中的父级返回一个道具值：

这是我的硬编码值代码

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

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

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

我想从父组件返回一个值而不是 50：props.goalPercentage

我在这里收到警告：

 Line 13:6:  React Hook useEffect has a missing dependency: 
'props.goalPercentage'. Either include it or remove the dependency 
 array. If 'setProgress' needs the current value of 
'props.goalPercentage', you can also switch to useReducer instead of 
 useState and read 'props.goalPercentage' in the reducer  react- 
 hooks/exhaustive-deps

加上反应控制台正在显示进度广告未定义的值：

道具

value : undefined
variant: determinate"

这是父级的返回：

return (
    <div>
      <Card
        variant="outlined"
        className={classes.root}
        style={{ border: 'none', boxShadow: 'none' }}
      >
        <Box sx={{ minWidth: 275 }}>
          <React.Fragment>
            <CardContent>
              <div className="total invest">
                <p className="main styling"> {props.collectedAmount}</p>
                <p className="details styling"> Comitted and reserved</p>
                <InvestLinearProgress {...props.goalPercentage} />
              </div>
              <Divider className="invest digits divider" />
              <div className="invest percentage">
                <p className="main styling">{props.goalPercentage} </p>
                <p className="details styling">Of minimum goals raised</p>
              </div>
              <Divider className="invest digits divider" />
              <div className="investers">
                <p className="main styling">{props.numberOfInversters}</p>
                <p className="details styling">Investers</p>
              </div>
              <Divider className="invest digits divider" />
              <div className="days left">
                <p className="main styling">{props.daysLeft}</p>
                <p className="details styling">Days Left to invest</p>
              </div>
            </CardContent>
            <CardActions>
              <div>
                <Button
                  variant="contained"
                  sx={{
                    maxWidth: '30px',
                    maxHeight: '30px',
                    minWidth: '250px',
                    minHeight: '45px',
                    alignContent: 'center',
                    fontSize: '15px',
                    marginTop: '10px',
                  }}
                >
                  Invest
                </Button>
              </div>
            </CardActions>
          </React.Fragment>
        </Box>
      </Card>
    </div>
  );

这是祖父母的归来：

return (
    <div className="main body">
      {' '}
      <div className="header main">
        <Header />
      </div>
      <section className="product main flex container">
        <bloc className="company details block">
          <div>
            <ProductInfo
              key={'product-' + id}
              id={id}
              header={header}
              title={title}
              description={description}
              category={category}
              img_logo={img_logo}
              tags={tags}
              mainImg={mainImg}
            />
          </div>
        </bloc>
        <bloc className="invest digits details block">
          <div className="product invest digits container">
            <ProductInvestDigits
              key={'product-' + id}
              id={id}
              collectedAmount={collectedAmount}
              numberOfInversters={numberOfInversters}
              daysLeft={daysLeft}
              goalPercentage={goalPercentage}
            />
          </div>
        </bloc>
      </section>
      <div className="footer">
        <div className="footer content">
          <Footer />
        </div>
        <div>
          <Disclaimer />
        </div>
      </div>
    </div>
  );
};


 

Answer 1

为防止 ESlint 发出此警告，您应该将 props.goalPercentage 放在 useEffect 依赖项中。

试试这个

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

useEffect(() => {
  if(props.goalPercentage){
     setProgress(props.goalPercentage);
  }
}, [props.goalPercentage]);
// ^^^^^^^^^^^^^^^^^^^^^^^^^
// your dependency

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

Answer 2

感谢大家的帮助，最后的更正是播种一个数字而不是字符串，因为 progress 的值应该是一个数字。