javascript - native react : How to fix the error - Passing an inline function will cause the component state to be lost on re-render?

Question

我收到此警告: “传递内联函数将导致组件状态在重新渲染时丢失，并导致性能问题，因为它会在每次渲染时重新创建。您可以将该函数作为子函数传递给“Screen”，以实现所需的行为”。 我尝试将 item 参数传递给“Neptun”组件函数类型，然后收到上述错误。 我该如何解决这个问题？

<Tab.Screen
          name="FOOD"
          component={() => <Neptun item={item} />}
          listeners={({ route }) => ({
            focus: () => {
              dispatch(
                setCurrentTabInfoAction({
                  currentTabName: route.name,
                  type: 'approved',
                })
              );
            },
          })}
        />
        <Tab.Screen

Answer 1

您可以执行以下操作... 这是警告建议的解决方案...

You can pass the function as children to 'Screen' instead to achieve the desired behaviour".

  return (
    <Tab.Screen
      name="FOOD"

      // component={() => <Neptun item={item} />}
    >
      {() => <Neptun item={item} />}
    </Tab.Screen>
  );

或者

<Tab.Screen name="FOOD" component={Neptun} />

并让 Neptun 从某种全局存储中获取 item，例如:React Context 或 Redux ...