Question

当我用setState挂钩更新时，值没有更新。据我所知，这个setState调用是异步的。如何解决这个问题？

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。

两者实际上都是Input上下文中的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的UI更改。

最后的评论，受控输入没有存储。因此，为了使用您的输入，您需要从外部定义一个状态。

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

这里带回家的信息是世界卫生组织应该管理存储（内存），这可能是在设计任何组件之前要放置的第一固定装置。

setState无法在React钩子中按预期方式工作

1 个答案: