如果使用API​​中的数据来反应Js

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

它使我的桌子全部消失，什么也不会显示。 percent_change_1h的值，例如“ 0.7”或“ -0.7”

Answer 1

您可以像这样检查：

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

Answer 2

您的数据在构造函数中初始化为数组。它是核心吗？顺便说一句。默认情况下包括return布尔值。在三元运算符中检查true值是多余的。顺便说一句，似乎corect，所以我想我们的数据有问题吗？

Answer 3

检查这两件事。

1. 数据类型。quotes.USD.percent_change_1h必须为字符串
2. 大多数IE版本将不支持include（），因此，如果您使用IE，请在其他浏览器中检查代码

Answer 4

您打开控制台了吗？ 您可能有一个错误，因为您正在获取数据，然后在设置数据之前尝试使用它。 另外，您将数据初始化为数组，然后将其用作对象。如果数据是对象数组，建议您创建辅助渲染方法并使用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>
        )
    })
}

然后在您的主要render（）方法中像这样调用它 {this.renderData()}。