在 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