Question

挂钩

export const useCreateAccount = () => {
  const [state, setState] = useState(initialState)

  const onChangeInput: ChangeEventFunction = useCallback(({ target }) => {
    if (!target.files) {
      return setState({ ...state, [target.name]: target.value })
    }
    setState({ ...state, [target.name]: target.files[0] })
  }, [])


  return { onChangeInput }
}

组件

const { onChangeInput } = useCreateAccount()

<form>
 <input name="name1" onChange={onChangeInput}>
 <input name="name2" onChange={onChangeInput}>
</form>

每次我在第二个输入（名称2）中进行一些更改时，组件的先前状态（名称1）都已丢失（重置为初始状态），使用“ useCallback”的原因，我只需要一个“ onChangeInput”实例'

但是，如果我删除了'useCallback'，状态将保持先前的值（名称1）

我无法理解钩子中的这种行为，有人可以详细说明吗？

Answer 1

来自docs：

组件中的任何函数（包括事件处理程序和效果）都可以从其创建的渲染中“看到”道具和状态。

在这里，当您使用import Route from '@ember/routing/route'; export default class WelcomeRoute extends Route { model() { return this.store.findAll('foo'); } }时，该函数已在其初始呈现中定义，并且具有初始定义的状态。这就是useCallback具有可用于刷新函数和函数内部值的依赖关系数组的原因。

但是您不能使用useCallback作为依赖项，因为您要在其中设置相同的依赖项，而是可以使用functional version of setState来获取state的先前值，而不是引用中央值

state

自定义钩子重置为其初始状态

1 个答案: