Javascript 在这段简单的代码中,如何从导航反应4升级到导航5

Javascript 在这段简单的代码中,如何从导航反应4升级到导航5,javascript,react-native,react-navigation,Javascript,React Native,React Navigation,这是我要升级的代码 此功能: function AddNotes({ navigation }) { const [noteTitle, setNoteTitle] = useState(""); const [noteDescription, setNoteDescription] = useState(""); function onSaveNote() { navigation.state.params.addNote({ no

这是我要升级的代码

此功能:

function AddNotes({ navigation }) {
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() {
    navigation.state.params.addNote({ noteTitle, noteDescription });
    navigation.goBack();
  }
消息中出现错误:

在非对象评估navigation.state.params中未定义

控制台中的错误:

在导航状态中找到了不可序列化的值,可以 中断使用,例如持久化和恢复状态。这可能会发生 如果您传递了不可序列化的值,如函数、类 参数中的实例等。如果需要将组件与回调一起使用 在选项中,可以使用“navigation.setOptions”。看见 更多细节

  • console.warn中的节点\u modules\react native\Libraries\YellowBox\YellowBox.js:71:8
  • 警告中的节点\u modules\expo\build\environment\muteWarnings.fx.js:18:23
  • 节点_modules@react-navigation\core\src\BaseNavigationContainer.tsx:258:10在React.useffect$argument\u 0中
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16921:31 在Commithookeffect列表中
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16970:29 屈服的
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 在invokeGuardedCallbackImpl中
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 在invokeGuardedCallback中
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20061:28 在flushPassiveEffectsImpl中
  • [本机代码]:flushPassiveEffectsImpl中为null
  • 节点\u modules\scheduler\cjs\scheduler.development.js:643:23在不稳定的\u runWithPriority中运行
  • 节点\u modules\react native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19597:25 在scheduleCallback$argument_1中
  • flushTask中的节点\u modules\scheduler\cjs\scheduler.development.js:482:68
  • flushWork中的节点\u modules\scheduler\cjs\scheduler.development.js:607:20
  • flushCallback中的节点\u modules\scheduler\cjs\scheduler.development.js:58:18
  • 节点\u modules\react native\Libraries\Core\Timers\JSTimers.js:146:14 in\u callTimer
  • callTimers中的节点\u modules\react native\Libraries\Core\Timers\JSTimers.js:399:17
  • node\u modules\react native\Libraries\BatchedBridge\MessageQueue.js:436:47 在调用函数中
  • node\u modules\react native\Libraries\BatchedBridge\MessageQueue.js:111:26 in _uGuard$argument_0
  • node\u modules\react native\Libraries\BatchedBridge\MessageQueue.js:384:10 内护
  • node\u modules\react native\Libraries\BatchedBridge\MessageQueue.js:110:17 in _uGuard$argument_0
  • [本机代码]:callFunctionReturnFlushedQueue中为null

在React Navigation 5中,您可以访问
route.params中的回调函数

function AddNotes({ navigation, route }) {
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() {
    const { params: { addNote } } = route;
    addNote({ noteTitle, noteDescription });
    navigation.goBack();
  }