在useEffect()中回傳一個prop

我是反應鉤子的新手，我試圖從我的 useEffect 鉤子中的父級回傳一個 prop 值：

這是我使用硬編碼值的代碼

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

另外，react 控制臺顯示了 progress ad undefined 的值：

道具

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


 

uj5u.com熱心網友回復：

為了防止來自 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>
 );
}

uj5u.com熱心網友回復：

感謝大家的幫助最后一次更正是播種一個數字而不是一個字串，因為進度的值應該是一個數字。

標籤：反应 反应钩子

上一篇：當“取消選中”ReactHooks中的復選框時，條形圖不會更新

下一篇：NextJS：生產中未定義的背景關系值（在開發中作業正常）