React 中怎么不通过 Hooks 使用 Promise 异步方法赋值？

Question

目前使用的方法都是通过 Hooks 来调用异步方法赋值如：

...
const [dataSource, setDataSource] = useState();
...
useEffect(() => {
  R_Resource_Select(routerParams.builder).then(function(data) {
    setDataSource(data.Data);
  })
}, [routerParams]);

但是有的值不要监控不需要变化我不想用 Hooks 这时候就不会写了老是报错：

// 这样写返回的是 Promise
const treeData = R_Builder_Tree().then(function(data) {
   return data;
  });
  console.log(treeData);
// 或者
const treeData = R_Builder_Tree();

都不行老是返回 Promise,求教我应该怎么改

Answer 1

首先 你调用的接口 返回值就是一个promise。

那么如果你要拿到接口的值 无非就是 async/await 或者 promise.then 来获取数据。

再其次 你应该使用的函数组件，函数组件在没有hooks的时候 一直都是无状态组件，他只负责渲染从其他组件传递过来的数据，自身并不能 带有状态。

如果你想在函数组件中，通过调用接口的方式去获取数据，并展示出来，所以react 提供了hooks的解决方案。

Answer 2

首先，你可以回想下没有hooks 的时候，请求接口 你是不是需要在生命周期函数 内请求？，所以如果不需要监听值得变化，也就是这个函数只用请求一次，你可以

// [] 为空相当于 componentDidMount
useEffect(() => {
  request();
}, [])

const request = () => {
   fetch().then((res) => {
    // 完成逻辑 或者请求数据存储
   })
}

Answer 3

你只是要把响应回调数据data赋值给treeData吗? 如果是的话，看看是不是这样

let treeData
R_Builder_Tree().then(function(data) {
   treeData = data;
   console.log(treeData);
});