在 React 组件的 function 中访问新鲜的 REDUX state

Question

我正在使用 React 和 React-Redux-Toolkit，但很难从 function 中访问更新后的 state。

我有一个自定义 React 组件，我传递了一个 state 的变量：

 const { useEffect, useState } = React; const ExternalComponent = ({ func }) => { func(); return ( <div></div> ); }; const Component = ({ state }) => { console.log("Component", state); const someFunction = () => { console.log("state", state); }; return ( <ExternalComponent func={someFunction} /> ); }; const Page = () => { const [state, setState] = useState(); useEffect(() => { setState(true); }, []); return ( <Component state={state} /> ); }; ReactDOM.render( <Page />, document.getElementById('root') );

 <body> <div id="root"></div> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script type="text/babel" src="main.js"></script> </body>

在初始页面呈现组件打印Component undefined ，因为state尚未undefined ，这是可以理解的，而不是问题所在。

当我以任何方式更新state时，组件重新呈现并打印Component <the change> ，这也是预期的。

但是， someFunction()不会更新并且仍然打印旧的state ，它仍然是undefined 。

如何让someFunction()进行“更新”，即打印更新后的state ？

编辑：错别字

Edit2：我创建了一个代码片段，其中一切都按预期工作。 但是，在我的实际代码中，我使用的是PaypalButtons ，我将someFunction传递给createOrder 。 我不确定 PaypalButtons 是如何工作的以及为什么someFunction不会更新。

Edit3：我正在使用paypal-react-js

Answer 1

发生这种情况是因为您有过时的价值。 尝试使用useCallback

import { useCallback } from 'react';

const Component = ({ statefulVariable }) => {
  console.log("Component", statefulVariable);

  const someFunction = useCallback(() => {
    console.log(statefulVariable);
  }), [statefulVariable]);

  return (
    <SomeThirdPartyComponent callback={someFunction}/>
  );
};

在 React 组件的 function 中访问新鲜的 REDUX state

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-30 09:59:27

在 React 组件的 function 中访问新鲜的 REDUX state

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-30 09:59:27

解决方案1
1 已采纳 2021-01-30 09:59:27