在JS及React中如何将trello-web接口响应数据存入变量或state

你只需要将.then(console.log)替换为自定义回调函数即可，回调的入参就是接口返回的完整响应数据，可在回调内完成变量赋值或React状态更新操作。

场景1：存入普通变量 #

// 预先声明存储数据的变量
let boardList = [];

trello.get('/1/boards').then(res => {
  // 回调内完成赋值，res即为原console.log打印的响应数据
  boardList = res;
  // 依赖该数据的业务逻辑建议直接在回调内执行，避免异步问题
  console.log('数据存储完成', boardList);
})

注意：trello.get为异步请求，无法在请求发起语句的下一行同步读取到最新值，需确认请求执行完成后再读取变量。

场景2：存入React组件state #

函数组件（配合useState） #

import { useState, useEffect } from 'react';

function TrelloBoardPage() {
  // 声明state存储看板数据
  const [boards, setBoards] = useState([]);

  useEffect(() => {
    trello.get('/1/boards').then(res => {
      // 调用state更新方法存入数据，会自动触发组件重渲染
      setBoards(res);
    })
  }, [])

  // 渲染时可直接使用boards变量
  return <div>共查询到{boards.length}个看板</div>
}

类组件 #

import React from 'react';

class TrelloBoardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      boards: []
    }
  }

  componentDidMount() {
    trello.get('/1/boards').then(res => {
      this.setState({ boards: res });
    })
  }

  render() {
    return <div>共查询到{this.state.boards.length}个看板</div>
  }
}

内容的提问来源于stack exchange，提问作者sedprc