setState не работает должным образом в ответной ловушке

Question

Когда я обновляю с помощью ловушки setState, значение не обновляется. Насколько мне известно, этот вызов setState является asyn c. Как решить эту проблему?

export default function ResultItem({result:{ name, result_type, entry, unit, min_val, max_val, in_spec}, handleEntryChange}){
const [inSpec, setInSpec] = useState(in_spec)
const [result, setResult] = useState(entry);

console.log(handleEntryChange)
return(
    <Fragment>

        <td>{name}</td>
        <td>{result_type}</td>
        <td>{}</td>
        <td>
            <input
                name={name} 
                type={result_type === 'numeric' ? "number" : "text"}
                value={result || ''}
                onChange={(e) => {
                    let val = parseInt(e.target.value)
                    setResult(val)
                    if(val >= min_val && val <= max_val){
                        setInSpec(true);
                    }else{
                        setInSpec(false);
                    }
                    console.log(result, inSpec, val)
                    handleEntryChange({[name]: val, [name]: inSpec});
                }}
            />
        </td>
        <td>{unit}</td>
        <td>{inSpec? 'YES': 'NO'}{console.log(in_spec)}</td>
    </Fragment>
)
}

Answer 1

Вы в основном пытаетесь сделать пользовательский ввод. В общем, вы должны быть осторожны, как этот вход контролируется? На вашем интерфейсе у вас есть entry (что может быть начальным значением), но внутренне у вас есть result.

Оба на самом деле value во входном контексте, но обычно они управляются либо из внешнего (на интерфейсе) или отслеживаются внутри, но не оба.

Просто отображение, если entry изменено, что может быть result?

Правильный путь следующий

  const Input = ({ value, onChange }) => {
    // no internal state here
    return (
       <input value={value} onChange={onChange} />
    )
  }

Это чистая модель прохода с обоими value и onChange, управляемыми внешним

Теперь вы можете спросить, как мне изменить внешний вид моего пользовательского ввода.

Теперь вы можете написать оболочку для onChange, чтобы внедрить вашу собственную реализацию.

  const onValueChange = e => {
    // e.target.value
    // do your own handling and then
    // if need call onChange(e) to handle external
  }

  <input onChange={onValueChange} />

Здесь я пропущу изменение пользовательского интерфейса для input, поскольку ваш пример уже есть.

Последний комментарий здесь, контролируемый ввод не имеет хранилища. Таким образом, чтобы использовать ваш ввод, вам нужно иметь состояние, определенное из внешнего источника.

  const [result, setResult] = useState(0)
  return (
    <YourInput value={result} />
  )

Здесь сообщение о том, что ВОЗ должна управлять хранилищем (памятью), это может быть приспособление № 1 для поставить на место перед разработкой любого компонента.