Question

当我尝试获取json文件并建立反应状态时遇到问题。

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文件）

我想知道我该怎么做。请帮助我，我很新来。

Answer 1

您可以map设置为所需的格式，然后再将其设置为状态：

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>;
  });
}

Answer 2

只需用then更改第二个map：

.then(cardsets => this.setState({ cards: cardsets.card_set.card_list.map(card => card.color = card.is_red ? "red" : "blue")}));

有关使用fetch（）和.then（）建立反应状态的问题

2 个答案: