时间戳

首页 > 解决方案 > 当我尝试将 API 调用作为道具从一个组件传递到另一个组件时，承诺未决

reactjs - 当我尝试将 API 调用作为道具从一个组件传递到另一个组件时，承诺未决

问题描述

我正在处理一个大型项目，从项目中的示例中，我发现一些组件将 API 调用从一个组件传递到另一个组件作为道具。然而，他们大多使用类组件而不是使用钩子来做到这一点。我更熟悉使用钩子和功能组件。在这里，我正在使用两个组件，一个是类组件，另一个是我从头开始构建的功能组件。我正在尝试在父组件中进行 api 调用：

class ProviderDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { unsignedNote: true };
    this.toggle = () =>
      this.setState({ unsignedNote: false });
  }

return (
      <div>
        {this.state.unsignedNote &&
        <UnsignedNoteModal 
      onSubmit={this.toggle}
      getList={api.Encounters.unsignedEncounters}
      />}
        <NavBar />
        <div className="dashboard-container">
          <h4>
            {" "}
            <div className="header-icon float-left">
              <DashboardIcon />
            </div>{" "}
            Dashboard{" "}
          </h4>
 </div>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProviderDashboard);

当我尝试传递getList和 console.log 时，我在控制台中得到类似这样的东西。ƒ unsignedEncounters() { return requests.get("/provider-encounters/unsigned-encounters"); } 但是，如果我像这样传递 api 调用， getList={api.Encounters.unsignedEncounters(e => e)} 我会得到一个 promise 已实现的对象，而我正在寻找隐藏在控制台中的一堆函数中的响应。有人可以解释我在这里缺少什么吗？

标签： reactjspromisecomponents

解决方案

它看起来像是api.Encounters.unsignedEncounters一个返回承诺的函数。

如果想让子组件负责调用api函数：

const UnsignedNoteModal = ({ getList }) => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getList().then(setList);
    // or depending on the data shape getList.then(r => setList(r?.data?.something));
  }, []);

  // Some jsx that uses list
};

我正在尝试在父组件中进行 api 调用

在这种情况下，做完全相同的事情，但使用setState而不是setList. 或者做一些重构，让你的父级也成为一个功能组件。

const ProviderDashboard = () => {
  const [unsignedNote, setUnsignedNote] = useState(true);
  const [list, setList] = useState([]);
  const mapState = useSelector(mapStateToProps);
  const dispatch = useDispatch();

  useEffect(() => {
    api.Encounters.unsignedEncounters()
      .then(setList);
  });

  const toggle = () => setUnsignedNote(!unsignedNote);

  return (
    <div>
      {
        unsignedNote &&
        <UnsignedNoteModal
          onSubmit={toggle}
          // Or just list={list}
          getList={() => list}
        />
      }
      < NavBar />
      <div className="dashboard-container">
        <h4>
          {" "}
          <div className="header-icon float-left">
            <DashboardIcon />
          </div>{" "}
          Dashboard{" "}
        </h4>
      </div>
    </div >
  );
};

推荐阅读