Реагировать на Js If Else, используя данные из API

Question

Это data.quotes.USD.percent_change_1h, берущий данные из API, и мне нужно, чтобы он проверил, содержит ли он «-» (знак минус).Если он содержит знак минус, цвет номера данных из API будет красным, в противном случае цвет будет зеленым.Но почему-то мой код не работает

class Cointable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      error: null,
      isLoaded: false,
      data: [],
    }
  }

  componentDidMount() {
    this.timer = setInterval(
      () =>
        fetch(conf[this.props.coin].url)
          .then(res => res.json())
          .then(
            result => {
              this.setState({
                isLoaded: true,
                data: result.data,
              })
            },
            error => {
              this.setState({
                isLoaded: true,
                error,
              })
            }
          ),
      5000
    )
  }
render(){
const { error, isLoaded, data } = this.state
    if (error) {
      return <div>Error: {error.message}</div>
    } else if (!isLoaded) {
      return <div>Loading...</div>
    }
return(

// здесь главная проблема

  {data.quotes.USD.percent_change_1h.includes('-') === true ? (
    <TD style={{ color: 'red' }}>{data.quotes.USD.percent_change_1h}</TD>
                  ) : (
    <TD style={{ color: 'green' }}>{data.quotes.USD.percent_change_1h}</TD>
                  )}
)
}

, из-за которого моя таблица исчезает и ничего не показывает.Значение процента_обмен_1h что-то вроде «0,7» или «-0,7»

Answer 1

Вы открывали консоль?Возможно, у вас есть ошибка, потому что вы выбираете данные, а затем пытаетесь использовать их до того, как они будут установлены.Кроме того, вы инициализируете данные как массив, а затем используете их как объект.Если данные являются массивом объектов, я предлагаю вам создать вспомогательный метод рендеринга и использовать метод map().

Примерно так:

renderData = () => {
    return this.state.data.map(item => { 
        return (
        item.quotes.USD.percent_change_1h.includes('-')
            ? <TD style={{ color: 'red' }}>{item.quotes.USD.percent_change_1h}</TD>
            : <TD style={{ color: 'green' }}>{item.quotes.USD.percent_change_1h}</TD>
        )
    })
}

А затем в вашем основном рендере() метод вызывает его следующим образом {this.renderData()}.

Answer 2

Ваши данные инициализируются как массив в конструкторе.Это сердцевина?Btw.Включает возврат логического значения по умолчанию.Проверка значения true в троичном операторе является избыточной.Кстати, это кажется corect, так что я думаю, что есть какие-то проблемы с вашими данными?

Answer 3

Проверьте эти две вещи ..

1. тип data.quotes.USD.percent_change_1h должен быть строкой
2. Большинство версий IE не будут поддерживать include (), поэтомупроверьте ваш код в других браузерах, если вы делаете в IE

Answer 4

Вы можете проверить так:

data.quotes.USD.percent_change_1h.indexOf('-') > -1