Question

我从天气api获取数据并希望使用此组件进行动画处理。例如，如果温度高于20，我希望显示'const sunny'。我已经得到了一旦获取数据就使它出现但是'if'语句不管怎么样都不起作用。是的，它仍然称为'多云'变量。

App.jsx组件中的'getWeather'函数正在提取天气。请帮忙。我错过了什么？

import React, { Component } from 'react'
import ReactAnimatedWeather from 'react-animated-weather';

const sunny = {
    icon: 'CLEAR_DAY',
    color: 'red',
    size: 200,
    animate: true
  };

  const cloudy = {                                      
    icon: 'PARTLY_CLOUDY_DAY',
    color: 'blue',
    size: 200,
    animate: true
  };

export default class Display extends Component {
  constructor(props) {
    super(props)    
    this.state = {
      animationData : 
      { icon: '',
      color: '',
      size: 0,
      animate: false},
      hasrecieved : true
      }

    this.getanimation = this.getanimation.bind(this)
  }

getanimation() { 
  let animationData = this.state.animationData
if (this.state.temperature < 1) {
  animationData = sunny
} else {
 animationData = cloudy
}
  this.setState({
    animationData: animationData,
    hasrecieved: true
  })
}

componentWillReceiveProps(nextProps) { 
    if (this.props !== nextProps) {
    this.setState(nextProps)
  }
  this.getanimation()  
}

  render() {
    console.log(this.state)
    return (
        <div>
    { this.state.hasrecieved && <ReactAnimatedWeather
      icon={this.state.animationData.icon}
      color={this.state.animationData.color}
      size={this.state.animationData.size}
      animate={this.state.animationData.animate}
    />}
    </div>
    )
  }
}

Answer 1

setState is asynchronous。您的getanimation正在使用this.state，并在setState之后立即调用：

componentWillReceiveProps(nextProps) { 
  if (this.props !== nextProps) {
    this.setState(nextProps)
  }
  this.getanimation()  
}

要确保在实际进行状态更改后调用它，请使用setState的第二个参数：

componentWillReceiveProps(nextProps) { 
  if (this.props !== nextProps) {
    this.setState(nextProps, this.getanimation)
  } else {
    this.getanimation()
  }
}

另外，请注意this.props !== nextProps 始终为真。属性可能等效，但它们不是相同的对象。

如果语句在React组件中不起作用。

1 个答案: