为什么更新的道具没有反映在 .then 函数中？答案

【问题标题】：Why updated props are not reflecting in .then function?为什么更新的道具没有反映在 .then 函数中？
【发布时间】：2019-05-27 13:55:32
【问题描述】：

我正在调用一个 handleClick 函数，该函数调用 fetchApi 操作，它将响应存储在 redux 中并返回一个承诺，我已将一个 .then 附加到我应该从 redux 存储中获取更新值的地方，我得到了外部 .then 重新渲染，但不在内部 .then 你可以查看这个代码沙箱https://codesandbox.io/s/what-is-the-reason-z6qt6

function App(props) {
  console.log(props.fetchApiRes, "outside handleclick");
  const getProps = () => props;

  function handleClick() {
    props.fetchApi().then(() => {
      console.log(props.fetchApiRes, "inside then");
      console.log(getProps().fetchApiRes, "still not getting ....");
    });
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

const mapDisptach = {
  fetchApi
};
const mapProps = ({ fetchReducer }) => {
  return {
    fetchApiRes: fetchReducer.fetchApi
  };
};

【问题讨论】：

我相信这是有意的行为。如果更新了跟踪的道具，则应该重新渲染，这是您应该使用道具的地方。函数调用中的 props 对象仍然是陈旧的 props 对象。

标签： javascript reactjs

【解决方案1】：

我首先建议的是将您的功能性App 组件转换为基于类的组件（因为该组件的组成不是纯功能性的）。这样你就可以拥有实例方法（如handleClick），可以访问生命周期方法，通过this使用道具等。更多信息在这里：https://stackoverflow.com/a/37719217/7956790

下一个流程是利用生命周期方法的强大功能，例如 componentDidUpdate，它将 prevProps 作为第一个参数，您可以使用它与当前的 props 进行比较，并执行您需要的任何逻辑因此。但是，请注意此方法中的state 操作（https://reactjs.org/docs/react-component.html#componentdidupdate）！

【讨论】：