Having trouble with handle change function ,leaves one character out-CodePudding

So the handle change method works , but always forgets the last character of my string(when I type "test" it saves "tes") ,even when I am testing to see if there are value with the error in the function ,only pick up the error if there is one character left. Any suggestion would be helpful.

const [ tools, setTools ] = useState({
        name: props.values.name || '',
        description: props.values.description || '',
        notes: props.values.notes || '',
        downloadLink: props.values.downloadLink
    });
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setTools((prevState) => ({
            ...prevState,
            [name]: value 
        }));
        props.setEditValues(tools);
        if (!tools.name || !tools.description || !tools.downloadLink) {
            props.setError(true);
        }
        else {
            props.setError(false);
        }
        

    };

<TextField
                            error={props.error}
                            fullWidth
                            label='Name'
                            name='name'
                            onChange={handleChange}
                            value={tools.name}
                            variant='outlined'
                        />

CodePudding user response：

The issue is that the tools is not up to date in the scope of the handleChange function after you call setState.

Calling setState does update the tools value in the component state, but the handleChange function needs to be recreated so it would have the updated value.

One way to solve the issue is using a useEffect hook:

  const [tools, setTools] = useState({
    name: props.values.name || '',
    description: props.values.description || '',
    notes: props.values.notes || '',
    downloadLink: props.values.downloadLink
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setTools((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  useEffect(() => {
    props.setEditValues(tools);
    if (!tools.name || !tools.description || !tools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  }, [tools, props.setEditValues, props.setError]);

  <TextField
    error={props.error}
    fullWidth
    label='Name'
    name='name'
    onChange={handleChange}
    value={tools.name}
    variant='outlined'
  />

Another way is to create the updated tools value in the handleChange function scope and use it both for setting the component state and inside the function.

The function would look like this and you don't need useEffect:

  const handleChange = (e) => {
    const { name, value } = e.target;
    const nextTools = { ...tools, [name]: value };
    setTools(nextTools);
    props.setEditValues(nextTools);
    if (!nextTools.name || !nextTools.description || !nextTools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  };

CodePudding user response：

Use onKeyUp insted of onChange:

<TextField
  error={props.error}
  fullWidth
  label='Name'
  name='name'
  onKeyUp={handleChange}
  value={tools.name}
  variant='outlined'
/>