为什么useState钩子不保存变量的值？

Question

I have a simple form presented with a modal that is intended to update my redux store with the value typed into the textbox.

I'm trying to use the useState hook to set the value of the textbox on change. When printing to the console I can see that the value of my variable - "note", is the correct value. However when trying to submit and passing "note" into my updateCheckpoint function, the value is undefined.

Additionally upon opening the dialog and submitting a second time, the note has the correct value.

function CompetencyCheckpoint(props)
{
    const dispatch = useDispatch();
    let [note, setNote] = useState();

    function updateCheckpoint(note){
        if(note != null){
            console.log("Here is our note : " + note);
        }else{
            console.log("oh no, we didn't get the note");
        }
    }
    console.log(note);
    return (
        <div className="checkpoint-container">
            <i className="material-icons" onClick={()=> 
                dispatch(openDialog({
                children: (
                    <React.Fragment>
                        <DialogTitle id="form-dialog-title">Add Note</DialogTitle>
                        <DialogContent>
                        <DialogContentText>
                            Enter a note.
                        </DialogContentText>
                        <TextField
                            id="filled-textarea"
                            label="New Note"
                            placeholder="Enter note here"
                            multiline
                            value={note}
                            onChange={(e) => setNote(e.target.value)}
                            margin="normal"
                            variant="filled"
                            fullWidth
                        />
                        </DialogContent>
                        <DialogActions>
                        <Button onClick={()=> dispatch(closeDialog())} color="primary">
                            Cancel
                        </Button>
                        <Button onClick={() => updateCheckpoint(note)} color="primary">
                            Add
                        </Button>
                        </DialogActions>
                    </React.Fragment>
                    )
                }))}>
                note_add
            </i>
        </div>);
}

export default (CompetencyCheckpoint);

Answer 1

The issue is that your JSX for the dialog content is captured at the time of opening the dialog and will not update as re-renders occur due to changing the note state. This is why @AhmadNoor's solution causes further issues -- it changes your TextField from uncontrolled to controlled, but it never receives the updated note value.

Your openDialog function should just control the open property on the Dialog. CompetencyCheckpoint should change to include the JSX of the entire Dialog directly rather than as an argument to the openDialog dispatch, so that it is included in re-renders due to changes to the note state.

Here's one way it could work (I'm assuming in my example that these are Material-UI components):

import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  TextField
} from "@material-ui/core";

function CompetencyCheckpoint(props) {
  const [open, setOpen] = React.useState(false);
  const [note, setNote] = React.useState("");

  function updateCheckpoint(note) {
    if (note != null) {
      console.log("Here is our note : " + note);
    } else {
      console.log("oh no, we didn't get the note");
    }
  }
  console.log(note);
  return (
    <div className="checkpoint-container">
      <i className="material-icons" onClick={() => setOpen(true)}>
        note_add
      </i>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle id="form-dialog-title">Add Note</DialogTitle>
        <DialogContent>
          <DialogContentText>Enter a note.</DialogContentText>
          <TextField
            id="filled-textarea"
            label="New Note"
            placeholder="Enter note here"
            multiline
            value={note}
            onChange={e => setNote(e.target.value)}
            margin="normal"
            variant="filled"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={() => updateCheckpoint(note)} color="primary">
            Add
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default CompetencyCheckpoint;

Answer 2

I was able to get the code working as expected. I'm not sure, maybe it had something to do with the way I was using the children: keyword, I'll check the docs to see what exactly that was doing. I was following a precedent I didn't fully understand.

Here is the solution I came up with. Basically I just added a state variable to control weather or not the dialog should show. I guess this also simplifies it so that i'm not calling redux to handle the Dialog toggle.

https://codesandbox.io/embed/focused-allen-cg1lq?fontsize=14

There may be further room for refactoring by making the Dialog it's own Component.

Thank you everyone who helped out, especially TJ and Ryan!