useEffect 不会在状态更新时触发答案

【问题标题】：useEffect not firing on state updateuseEffect 不会在状态更新时触发
【发布时间】：2023-01-26 22:18:42
【问题描述】：

我在我的 React Native 组件中用 useState() 更新了一些状态。一旦设置了该状态，我想将详细信息保存到服务器，因此我在 useEffect() 挂钩中进行了设置。

但是，我注意到的是，即使我在 useEffect() 挂钩的依赖项数组中将 note 设置为依赖项，该函数也不会在状态更新时触发。我在这里错过了什么？

  const [note, setNote] = useState('');
  const dispatch = useDispatch();
  useEffect(() => {
    if (note) {
      console.log('updating note...');
      dispatch(updateNote(props.client.id, note));
    }
  }, [note]);

仅供参考，我正在更新 TextInput 内的状态，就像这样（我不得不使用 onBlur 来避免反应失去对第一个字符类型的关注的问题，因为我在 TabNavigator 的screenOptions 中传递了一个组件）：

<TextInput
  key='note'
  style={{
    color: '#fff',
    fontSize: 16,
    width: '100%',
    textAlign: 'center',
  }}
  placeholder='Tap here to share something...'
  placeholderTextColor={styles.colors.textPlaceholder}
  maxLength={50}
  onBlur={(text) => setNote(text)}
  defaultValue={note || props?.client?.note?.value}
/>

【问题讨论】：

你在哪里更新状态？你能创建一个最小的组件来演示这种行为吗？
我在上面添加了该代码。由于一次传递给另一个的方式，这将很难设置一个最小的组合——请参阅我关于反应失去对第一个字符类型重新渲染的关注的评论。经过大量研究，我找到了一种解决该问题的方法，即使用 onBlur 而不是 onChange 或 onChangeText。
您确定 TextInput 工作正常吗？也许 console.log(text) 在 onBlur 中。可能是一个事件而不是文本，也许你必须使用 e.target.value
好吧，我在屏幕上看到了值类型。不然怎么会在那里？正在设置注释，否则我根本看不到任何值。我首先看到占位符文本，然后在我键入时，它会按预期绘制到屏幕上。

标签： reactjs react-native react-hooks

【解决方案1】：

  onBlur={(text) => setNote(text)}

这就是问题所在。处理程序的参数不是输入的值，它是一个合成的 React 事件。应该

onBlur={(event => setNote(event.target.value)}

【讨论】：

【解决方案2】：

看这里https://playcode.io/1106437，它可以工作，但是你有 onBlur，你需要模糊来触发动作，也许你需要使用 onChangeText insted。

【讨论】：