条件渲染反应原生：只有其他部分正在工作

Question

我在 react 中做了一个条件渲染语句。我正在检查的条件是基于服务器响应的。如果满足条件，那么我必须呈现一些 UI 组件，否则会呈现不同的 UI。所以问题是我从服务器得到了什么，只有其他部分在工作。我也仔细检查了response。

更新代码

export default class ViewStatus extends Component {
  constructor(props) {
        super(props);
        this.initialState = {
        progressData: [],
        };
        this.state = this.initialState;
    }
    componentWillMount(){
       fetch('http://192.168.1.2:3000/api/progress',{
         method:'POST',
         headers:{
           'Accept': 'application/json',
           'Content-Type':'application/json'
         },
         body:JSON.stringify({
           work_type:this.props.work_type
         })
       })
      .then(response => response.json())
      .then((responseData) => {
         this.setState({
      progressData:responseData[0]
      });
    });
  }
render() {
const isResponseData = this.state.progressData == '1' ? this.renderDone() : this.renderInProgress()
 console.log(this.state.progressData);
  return(
     <View>
        {isResponseData}
      </View>
    );
  }
  renderInProgress(){
    return(
        <View>
          <Text>In Progress</Text>
          <Text>Worker will approach you within 24 hrs.</Text>
       </View>
     );
  }
  renderDone(){
    return(
       <View>
        <Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text>
       </View>
     );
  }

Answer 1

1. 您需要调用 responseData[0].status 从 API 获取值。
2. API 调用应仅发生在 componentDidMount 中
3. componentWillMount 已弃用，因此请忘记此方法
4. 只需使用三元运算符来呈现内容，而不是使用多个函数。

试试下面的代码。

export default class ViewStatus extends Component {
  constructor(props) {
        super(props);
        this.state = {progressData: ""};
    }
    componentDidMount(){
       fetch('http://192.168.1.2:3000/api/progress',{
         method:'POST',
         headers:{
           'Accept': 'application/json',
           'Content-Type':'application/json'
         },
         body:JSON.stringify({
           work_type:this.props.work_type
         })
       })
      .then(response => response.json())
      .then(responseData => {
         this.setState({
      progressData:responseData[0].status
      });
    });
  }
render() {
const { progressData }= this.state;
  return(
     <View>
        {progressData == "1" &&
         (<View><Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text></View>)}
    {progressData == "2" &&
         (<View><Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text></View>)}
         {progressData == "" &&(<View><Text>In Progress</Text>
          <Text>Worker will approach you within 24 hrs.</Text></View>)}
      </View>
    );
  }

}