useEffect不触发

时间:2020-03-19 08:16:58

标签: reactjs react-hooks

我认为我的useEffect已损坏。

我在父组件上有

 thread #1, queue = 'com.apple.main-thread', stop reason = signal SIGABRT
    frame #0: 0x0000000195969ec4 libsystem_kernel.dylib`__pthread_kill + 8
    frame #1: 0x0000000195885774 libsystem_pthread.dylib`pthread_kill$VARIANT$mp + 112
    frame #2: 0x00000001957d9844 libsystem_c.dylib`abort + 100
    frame #3: 0x00000001959327d4 libc++abi.dylib`abort_message + 128
    frame #4: 0x00000001959329c4 libc++abi.dylib`demangling_terminate_handler() + 296
    frame #5: 0x000000019589a258 libobjc.A.dylib`_objc_terminate() + 124
    frame #6: 0x000000019593f304 libc++abi.dylib`std::__terminate(void (*)()) + 16
    frame #7: 0x000000019593ec58 libc++abi.dylib`__cxxabiv1::failed_throw(__cxxabiv1::__cxa_exception*) + 32
    frame #8: 0x000000019593ec18 libc++abi.dylib`__cxa_throw + 124
    frame #9: 0x000000019589a0d0 libobjc.A.dylib`objc_exception_throw + 356
    frame #10: 0x0000000195a66f84 CoreFoundation`+[NSException raise:format:] + 108
  * frame #11: 0x0000000107f993dc LocationTrackingFW`+[FIRInstallations installations](self=FIRInstallations, _cmd="installations") at FIRInstallations.m:159:5
    frame #12: 0x0000000107ab1bc0 LocationTrackingFW`+[FIRAnalytics updateFirebaseInstallationID] + 32
    frame #13: 0x0000000107ab1aec LocationTrackingFW`+[FIRAnalytics startWithConfiguration:options:] + 564
    frame #14: 0x00000001025cdac0 Field Service`-[FIRApp configureCore](self=0x0000000280a1b510, _cmd="configureCore") at FIRApp.m:364:9
    frame #15: 0x00000001025cd5e0 Field Service`+[FIRApp addAppToAppDictionary:](self=0x00000001035a2f20, _cmd="addAppToAppDictionary:", app=0x0000000280a1b510) at FIRApp.m:317:7
    frame #16: 0x00000001025cc90c Field Service`+[FIRApp configureWithName:options:](self=0x00000001035a2f20, _cmd="configureWithName:options:", name=@"__FIRAPP_DEFAULT", options=0x0000000280a1b750) at FIRApp.m:202:5
    frame #17: 0x00000001025cc330 Field Service`+[FIRApp configureWithOptions:](self=0x00000001035a2f20, _cmd="configureWithOptions:", options=0x0000000280a1b750) at FIRApp.m:145:3
    frame #18: 0x00000001025cc27c Field Service`+[FIRApp configure](self=0x00000001035a2f20, _cmd="configure") at FIRApp.m:131:3
    frame #19: 0x00000001022cb54c Field Service`AppDelegate.setupFirebase(self=0x0000000109f08a00) at AppDelegate.swift:272:21
    frame #20: 0x00000001022cb454 Field Service`AppDelegate.init() at AppDelegate.swift:42:9
    frame #21: 0x00000001022cb5e4 Field Service`@objc AppDelegate.init() at <compiler-generated>:0
    frame #22: 0x0000000199bda698 UIKitCore`UIApplicationMain + 1728
    frame #23: 0x00000001022d1af4 Field Service`main at AppDelegate.swift:21:7
    frame #24: 0x0000000195974360 libdyld.dylib`start + 4

以及子组件

 <div className={redactKategori}>
    <select className="form-control form-control-sm mb-3 mr-2" name="betalt" defaultValue={'välj kategori'} onChange={e => { e.preventDefault(); setKate(e.target.value); setRedactKategoris('d-block') }}>
      <option >valj kategori</option>
      { Kategori ?
        Object.keys(Kategori).map(key => {
          return (
            <option key={key} value={key}>{key}</option>
          )
        }) :
        null
      }
      </select>
    <div className={redactKategoris}>
  <EditKat aa={kate} />
</div>

据我所知,每次function EditKat({ aa }) { let defaultValues = 0 useEffect(() => { defaultValues = 2 }, [aa]) console.log(defaultValues) } 都会在父组件上获得一个值,子组件会触发${kate}钩子。但是,它不起作用。我在做错什么吗?

2 个答案:

答案 0 :(得分:1)

发生这种行为的原因不是useEffect无效。这是因为功能组件的工作方式。

如果您查看自己的子组件,如果执行了useEffect并重新发布了该组件,则defaultValues将再次设置为0,因为该函数内部的代码是在每个渲染周期。

要解决此问题,您需要使用useState来保持各个渲染器的本地状态一致。

这看起来像这样:

function EditKat({ aa }) {
  // Data stored in useState is kept across render cycles
  let [defaultValues, setDefaultValues] = useState(0)

  useEffect(() => {
    setDefaultValues(2) // setDefaultValues will trigger a re-render
  }, [aa])

  console.log(defaultValues)
}

答案 1 :(得分:0)

在父代码中创建组件时尝试在组件上添加一个 key prop

<yourcomponent key="uniquevalue" />

这是因为在大多数情况下,当你的组件被重用时,根据它的创建方式,它通常可能会通过一些更改重新渲染它,而不是在你重用它时再次重新创建它,因此 {{1} } 不会被调用。例如在 SwitchRoute、循环、条件...

所以添加一个密钥可以防止这种情况发生。如果它在循环中,请确保每个元素都是唯一的,如果找不到更好的唯一键,可以在键中包含索引 useEffect