Reactjs 当我尝试将API调用作为道具从一个组件传递到另一个组件时，Promise挂起

我正在处理一个大型项目，从项目中的示例中，我发现一些组件将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);

类ProviderDashboard扩展组件{
建造师（道具）{
超级（道具）；
this.state={unsignedNote:true}；
this.toggle=（）=>
this.setState（{unsignedNote:false}）；
}
返回(
{this.state.unsignedNote&&
}
{" "}
{" "}
仪表板{“}
);
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（ProviderDashboard）；

当我试图传递

getList

和console.log时，我在控制台中得到了类似的结果

unsignedEncounters（）{return requests.get（“/provider conferences/unsigned conferences”）；}

但是如果我像这样传递api调用

getList={api.Conferences.unsignedEncounters（e=>e）}

---

我得到了一个承诺实现的对象，其响应隐藏在控制台中的一组函数中。有人能解释一下我在这里遗漏了什么吗？

它看起来像是

api.Conferences.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 >
  );
};

const ProviderDashboard=（）=>{
const[unsignedNote，setUnsignedNote]=useState（true）；
const[list，setList]=useState（[]）；
常量mapState=useSelector（MapStateTops）；
const dispatch=usedpatch（）；
useffect（（）=>{
api.conferences.unsignedEncounters（）
.然后（设置列表）；
});
const toggle=（）=>setUnsignedNote（！unsignedNote）；
返回(
{
未签名票据&&
列表}
/>
}

{" "}
{" "}
仪表板{“}
);
};

感谢您的回复！当我尝试将道具作为

{api.conferences.unsignedEncounters（e=>e）}

发送时，您的解决方案会起作用。如果您告诉我们

api.conferences.unsignedEncounters的签名，会有所帮助。您正在将lambda作为参数传递并返回一个承诺，但看起来该函数实际上是无参数的。哦，这是因为我犯了一个错误，将其编写为
getList。然后（…）
。这是有意义的，因为这种语法要求prop是一个承诺。它实际上应该是
getList（）。然后（…）