Reactjs React渲染trello卡名称

我有一个react应用程序，其组件如下：

import React, { Component } from 'react';
import '../css/TrelloCards.css';

class TrelloCards extends Component {
  componentDidMount() {
    const authenticationFailure = () => { console.log('Auth failure') };
    const trello = window.Trello;

    const getCards = () => {
      const error = (error) => {
        console.log(error);
      }
    const cards = (cards) => {
      console.log(cards);
    }
    trello.get('/member/me/cards', cards, error);
  }

  trello.authorize({
      type: 'redirect',
      name: 'React Trello',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: getCards,
      error: authenticationFailure,
      response_type: 'token',
    });
  }

  render() {
    return(
      <h1>Placeholder</h1>
    );
  }
}

export default TrelloCards;

import React，{Component}来自'React'；
导入“../css/TrelloCards.css”；
类TrelloCards扩展组件{
componentDidMount（）{
const authenticationFailure=（）=>{console.log（'Auth failure'）；
const trello=window.trello；
const getCards=（）=>{
常量错误=（错误）=>{
console.log（错误）；
}
常量卡片=（卡片）=>{
控制台.日志（卡片）；
}
trello.get（'/member/me/cards'，cards，error）；
}
特雷罗({
键入：“重定向”，
名称：“React Trello”，
范围：{
读到：'正确'，
写：“真的”}，
到期日：“永不”，
成功：获得卡片，
错误：身份验证失败，
响应类型：“令牌”，
});
}
render（）{
返回(
占位符
);
}
}
导出默认树状卡片；

我已经成功地用控制台记录了我的卡，但是现在我想在页面上呈现它们，我已经尝试了

render() {
  return(
    <ul>
      {cards}
    </ul>
  );
}

render（）{
返回(

{卡片}

);
}

我尝试过通过以下卡片进行映射：

cards.map(card => {
  return(
    <li>{card.name}</li>
  );
}

cards.map（卡=>{
返回(
{card.name}
);
}

---

但我得到的错误是“卡”没有定义。一般来说，我对反应和编程都是新手，如果有任何帮助，我将不胜感激。

在您的情况下，

render

无法访问您通过trello下载的

卡（它们只能在
componentDidMount
中访问）。解决此问题的一种方法是将下载的卡保存到react状态。
render
随后将被调用，因为状态已更改，卡将被渲染

例子
类TrelloCards扩展组件{
构造函数（）{
此.state={
卡片：[]控制台.log（'auth success'），
错误：（）=>console.log（'auth failure'），
响应类型：“令牌”，
});
trello.get（“/member/me/cards”，
（cards）=>this.setState（{cards}），
^----在此处设置状态（速记）
（错误）=>console.log（'无法获取卡'））
}
}
render（）{
返回(
{this.state.cards.map（card=>
{card.name}
）}
^----从州里拿出卡片
);
}
}
太棒了，成功了，谢谢！console.log（'无法获取卡'）之后缺少一个“'），但除此之外，一切都很好。修复了它。抢手货
class TrelloCards extends Component {
  constructor() {
    this.state = {
      cards: []      <-------- define your initial state
    }
  }

  componentDidMount() {
    const trello = window.Trello;

    trello.authorize({
      type: 'redirect',
      name: 'React Trello',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: () => console.log('auth success'),
      error: () => console.log('auth failure'),
      response_type: 'token',
    });

    trello.get('/member/me/cards', 
      (cards) => this.setState({ cards }),
                      ^----  set state here (shorthand)
      (error) => console.log('could not get cards'))
    }
  }

  render() {
    return(
      <div>
        {this.state.cards.map(card =>
          <li>{card.name}</li>)}
          ^---- render cards from state
      </div>
    );
  }
}