React Hooks - 使用新道具更新状态

Question

我对 Hooks 的新实现感到非常困惑。 如何为收到的道具设置状态值，甚至在收到道具时不会重新渲染。 （这是我想要的结果）

这是我的代码：（我想将“数量”值设置为 null，除非它被道具接收，无论哪种情况，它都应该处于状态并更改）。

import React from 'react';
import Firebase from 'firebase';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';

export default function NumberField(props) {
  const handleAmountChange = (targetValue) => {
    Firebase.database().ref('users/'+Firebase.auth().currentUser.uid
    +'/details/'+props.date+'/'+props.values.fieldName).set(targetValue);
    setAmount(targetValue);
  }

  const a = props.details[props.values.fieldName];

  const [amount, setAmount] = React.useState(props.details.Calls);

  const GenerateAmount =({amount: a  }) => {
      const  [amount, setAmount] = React.useState(null);
      React.useEffect(() => {
        setAmount (a)
      },{}) 
  }
  return (
    <Box display="flex" p={1} bgcolor={props.values.bgColor}>
    <Grid container direction="column" alignItems="baselline" spacing={2} xs = {12}> 
      <Box display="flex" p={1} >
      <Grid item xs={12}>
        <Box>
          <Grid container justify="center" > 
            <Button variant="contained" style={buttonStyle} onClick={() => handleAmountChange(props.values.buttons.b1)} >{props.values.buttons.b1}</Button>
            <Button variant="contained" style={buttonStyle}  onClick={() => handleAmountChange(props.values.buttons.b2)} >{props.values.buttons.b2}</Button>
            <Button variant="contained" style={buttonStyle}  onClick={() => handleAmountChange(props.values.buttons.b3)} >{props.values.buttons.b3}</Button>
            </Grid>
        </Box>
      </Grid>
      <Grid item xs={6}>
        <Box position="left" left="50%">
          <TextField id="outlined-number" label={props.values.fieldDescription} type="number" value={amount}
            onChange={(e) => handleAmountChange(e.target.value)} 
            InputLabelProps={{shrink: true,}} variant="outlined" />
          </Box>
      </Grid>
        </Box>
    </Grid>
    </Box>
  );
}

Answer 1

我完全确定你在问什么，但是你可以使用钩子 useEffect 来监听道具何时发生变化，然后设置状态。

像这样：

const [amount, setAdmount] = useState(null);
    useEffect(() => {
        setAmount(props.amount);
    }, [props.amount]);