为了账号安全,请及时绑定邮箱和手机立即绑定

第三方 API 需要访问 React 应用程序中的状态

第三方 API 需要访问 React 应用程序中的状态

慕森王 2023-01-06 10:51:42

我们有一个 React 应用程序,它与第三方库通信以进行电话集成。每当有人打电话时,第三方库就会触发 React 应用程序内部的回调函数。到现在为止一切都很好,但是现在这个回调函数需要访问当前状态,这似乎会带来问题。这个回调函数内部的状态,似乎总是处于初始值并且永远不会更新。


我在这里做了一个小沙盒来描述这个问题:https ://codesandbox.io/s/vigorous-panini-0kge6?file=/src/App.js


在沙盒中,当我单击“内部增加”时,计数器值会正确更新。但是,相同的函数已添加为 ThirdPartyApi 的回调,当我单击“外部增加”时将调用它。当我这样做时,计数器值恢复为 useState 中的默认值。


我怎样才能让第三个库知道来自 React 内部的状态更新?


应用程序.js:


import React, { useState, useEffect } from "react";

import ThirdPartyApi from "./third-party-api";

import "./styles.css";


let api = new ThirdPartyApi();


export default function App() {

  const [counter, setCounter] = useState(5);


  const increaseCounter = () => {

    setCounter(counter + 1);

    console.log(counter);

  };


  useEffect(() => {

    api.registerCallback(increaseCounter);

  }, []);


  return (

    <div className="App">

      <p>

        <button onClick={() => increaseCounter()}>Internal increase</button>

      </p>


      <p>

        <button onClick={() => api.triggerCallback()}>External increase</button>

      </p>

    </div>

  );

}

第三方-api.js:


export default class ThirdPartyApi {

  registerCallback(callback) {

    this.callback = callback;

  }


  triggerCallback() {

    this.callback();

  }

}


查看完整描述

1 回答

?
慕妹3146593

TA贡献1575条经验 获得超9个赞

您需要通过React 的 useCallbackincreaseCounter()包装到回调中。实际上,因此重新渲染,重置.api.registerCallback()counter

您可以在此处了解有关此行为的更多信息。

import React, { useState, useCallback, useEffect } from "react";

import ReactDOM from "react-dom";


class ThirdPartyApi {

  registerCallback(callback) {

    this.callback = callback;

  }


  triggerCallback() {

    this.callback();

  }

}


let api = new ThirdPartyApi();


function App() {

  const [counter, setCounter] = useState(5);


  const increaseCounter = useCallback(() => {

    setCounter(counter + 1);

    console.log(counter);

  }, [counter]);


  useEffect(() => {

    api.registerCallback(increaseCounter);

  }, [increaseCounter]);


  return (

    <div className="App">

      <p>

        <button onClick={() => increaseCounter()}>Internal increase</button>

      </p>


      <p>

        <button onClick={() => api.triggerCallback()}>External increase</button>

      </p>

    </div>

  );

}


const rootElement = document.getElementById("root");

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  rootElement

);


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信