时间戳

首页 > 解决方案 > setState 在反应钩子中没有按预期工作

reactjs - setState 在反应钩子中没有按预期工作

问题描述

当我使用 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>
)
}

标签： reactjsreact-hooks

解决方案

您基本上是在尝试进行自定义输入。一般来说，您需要注意如何控制此输入？在您的界面上，您拥有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此处的 UI 更改，因为您的示例已经存在。

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

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

这里的主要信息是谁应该管理存储（内存），这可能是在设计任何组件之前要放置的第一固定装置。

推荐阅读