在useEffect中使用useState

Question

[我正在使用useState从TextInput设置文本，并且我正在使用useEffect覆盖后退按钮的行为。

const [text, setText] = useState("");

  <TextInput
    onChangeText={text => setText(text)}
    defaultValue={text}
  /> 

  const printVal() {
    console.log("text is " + text);
  }

 useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton onPress={() => printVal()} />
      )
    });
  });

这总是导致记录的文本是useState的初始值。如果我不使用useEffect，则可以使用，但我不想每次更改都设置导航选项。我可以从useEffect的useState中获取当前值，还是需要其他解决方案？

Answer 1

您忘记将依赖项作为第二个参数添加到useEffect。如果希望在组件加载时仅调用一次函数，则可以添加一个空数组；对于本示例，您应该添加文本作为dependecy，因为useEffect取决于此值

 useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton onPress={() => printVal()} />
      )
    });
  }, [text]);  //<- empty array here