React Hooks - обновлять состояние новыми реквизитами

Question

Я очень озадачен новыми реализациями с хуками. Как я могу установить значения состояния для полученного реквизита, он даже не перерисовывается при получении реквизита. (это мои желаемые результаты)

Вот мой код: (Я хотел бы установить значение «количество» в ноль, если оно не получено реквизитами, в любом случае оно должно быть в состоянии и изменено).

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