Question

我正在调用handleClick函数，在该函数上调用fetchApi动作，该动作将响应存储在redux中并返回一个promise，我在其中附加了.then，然后从中获取来自redux存储的更新值在外部。然后在重新提交，但不在内部。然后您可以检查此代码沙箱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
  };
};

Answer 1

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

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

为什么更新的道具未反映在.then函数中？

1 个答案: