javascript - react : Change Style of component after AJAX Call

Question

我目前正在创建动态设计 UI。我也在使用 axios 调用来获取动态设计属性，如背景颜色、字体颜色、要显示的图像。

import React, {Component} from "react";
import MainButton from '../utilities/MainButton';

const tinycolor = require("tinycolor2");
const styles = {
  underlineStyle: {
    borderColor: blue800
  }
}

class MobileHome extends React.Component {
  constructor(props) {
    super(props);        
    this.color = '';
    this.state = {
      mainColor: '',
      fontColor: ''
    }
  }

  componentWillMount() {
    axios.get('/getEventConfig').then(res => {
      var config = res.data;
      var color = tinycolor(config.COLOR);
      var font = '#fff';
      if (color.isLight()){
        font = '#000';
      }
      this.color = color;
      this.setState({mainColor: config.COLOR}); // error on timing issue
      console.log('set state', this.state.mainColor);
    });
  }

  render() {
    return (
      <div className="center-panel">  

      <TextField
        hintText="Enter Code Here"
        fullWidth={true}
        underlineFocusStyle={styles.underlineStyle}
        id="event_code" />

          <MainButton
            label="Upload Photo"
            fullWidth={true}
            size="xl"
            color={color}
            fontcolor={this.state.fontColor}
            onClick={this.uploadPhoto}/>
      </div>
    )
  }
}

export default MobileHome 

在其中，我的 MainButton 是另一个组件，只是调用 Material UI RaisedButton:

class MainButton extends React.Component {
  constructor(props) {
    super(props);

    console.log('p', this.props);
    let mainColor = _.isNil(this.props.color) ? '#2E65C2': this.props.color;
    let fontColor = _.isNil(this.props.fontColor) ? '#FFF': this.props.fontColor;

    this.styles = {
      root: {
        width: 225
      },
      label: {
        color: fontColor,
        paddingTop: 5
      },
      color: mainColor,
    }
  }

  render() {
    return (
      <RaisedButton
      label={this.props.label}
      fullWidth={this.props.fullWidth}
      buttonStyle={this.styles.button}
      style={this.styles.root}
      backgroundColor={this.styles.color}
      labelStyle={this.styles.label}
      onClick={this.props.onClick}
      />
    )
  }
}
export default MainButton;

问题是，在 axios 调用完成之前，MainButton 已经呈现。我正在寻找某种方式，让渲染在 axios 调用完成之前等待，然后再显示 UI。这可能吗？

Answer 1

您可以使用三元运算符根据状态变化显示 MainButton。检查下面的代码，这里我采用了新的状态变量 resReceived 并将其默认设置为 false。在 API res 中设置为 true。

import React, {Component} from "react";
import MainButton from '../utilities/MainButton';

const tinycolor = require("tinycolor2");
const styles = {
  underlineStyle: {
    borderColor: blue800
  }
}

class MobileHome extends React.Component {
  constructor(props) {
    super(props);        
    this.color = '';
    this.state = {
      mainColor: '',
      fontColor: '',
      resReceived: false
    }
  }

  componentWillMount() {
    axios.get('/getEventConfig').then(res => {
      var config = res.data;
      var color = tinycolor(config.COLOR);
      var font = '#fff';
      if (color.isLight()){
        font = '#000';
      }
      this.color = color;
      this.setState({mainColor: config.COLOR, resReceived: true}); // error on timing issue
      console.log('set state', this.state.mainColor);
    });
  }

  render() {
    return (
      <div className="center-panel">  

      <TextField
        hintText="Enter Code Here"
        fullWidth={true}
        underlineFocusStyle={styles.underlineStyle}
        id="event_code" />
        {this.state.resReceived ? 
          <MainButton
            label="Upload Photo"
            fullWidth={true}
            size="xl"
            color={color}
            fontcolor={this.state.fontColor}
            onClick={this.uploadPhoto}/>
         : ''}
        }
      </div>
    )
  }
}

export default MobileHome 

或

如果您想在收到回复之前一直禁用该按钮，请尝试下面的一个。

import React, {Component} from "react";
import MainButton from '../utilities/MainButton';

const tinycolor = require("tinycolor2");
const styles = {
  underlineStyle: {
    borderColor: blue800
  }
}

class MobileHome extends React.Component {
  constructor(props) {
    super(props);        
    this.color = '';
    this.state = {
      mainColor: '',
      fontColor: '',
      disableMainButton: true
    }
  }

  componentWillMount() {
    axios.get('/getEventConfig').then(res => {
      var config = res.data;
      var color = tinycolor(config.COLOR);
      var font = '#fff';
      if (color.isLight()){
        font = '#000';
      }
      this.color = color;
      this.setState({mainColor: config.COLOR, disableMainButton: false}); // error on timing issue
      console.log('set state', this.state.mainColor);
    });
  }

  render() {
    return (
      <div className="center-panel">  

      <TextField
        hintText="Enter Code Here"
        fullWidth={true}
        underlineFocusStyle={styles.underlineStyle}
        id="event_code" /> 
          <MainButton
            label="Upload Photo"
            fullWidth={true}
            size="xl"
            color={color}
            fontcolor={this.state.fontColor}
            onClick={this.uploadPhoto}
            disabled = {this.state.disableMainButton}
            />
        }
      </div>
    )
  }
}

export default MobileHome