javascript - 关于使用 fetch() 和 .then() 构建 react 状态的问题

Question

当我尝试获取 json 文件并构建 react 状态时遇到问题。

import React, {
    Component
} from 'react';

class App extends Component {
    constructor() {
        super()
        this.state = {
            cards: []
        }
    }

    componentDidMount() {
        fetch('https://steamcdn-a.akamaihd.net/apps/583950/resource/card_set_1.3E50A21FB5DAFC5864FE5DE99E0EC84E4B3F00DB.json')
            .then(response => response.json())
            .then(cardsets => this.setState({
                cards: cardsets.card_set.card_list
            }))
    }

以上是我完成的代码。它正在发挥作用。所以此时我想让我的this.state.cards[i]对象有一个名称“颜色”，值将基于 this.state.cards[i].is_blue或this.state.cards[i].is_red等(这些仅来自 json 文件)。

我想知道我该怎么做。请帮助我，我对 react 还很陌生。

Answer 1

您可以在将其设置为状态之前映射到所需的格式:

this.setState({
 cards: cardsets.card_set.card_list.map(({ is_red, is_blue, ...rest }) => ({ 
   color: (is_red && "red") || (is_blue && "blue") || "black",
   ...rest
  })),
});

然后您可以在渲染时访问cards[i].color。

或者直接在渲染时提取颜色:

 render() {
  const { cards } = this.state;

  return cards.map(card => {
   const { is_blue, is_red } = card;
   const color = (is_red && "red") || (is_blue && "blue") || "black";

   return <div style={{ color }} >Card</div>;
  });
}