Вопрос о построении состояния реакции с использованием fetch () и .then ()

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] объект имел имя 'color', а значение было бы основано на this.state.cards[i].is_blue или this.state.cards[i].is_red и т. Д. (Это только из файла json).

Мне интересно, как я мог это сделать.Пожалуйста, помогите мне, я очень новичок, чтобы реагировать.

Answer 1

Просто измените свой второй then с map:

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

Answer 2

Вы можете 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>;
  });
}