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

Posted 2023-02-22

【中文标题】条件渲染反应原生：只有其他部分正在工作

【英文标题】：Conditional rendering react native :only else part is working

【发布时间】：2019-03-21 18:13:28

【问题描述】：

我在 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>
     );
  

【问题讨论】：

你能检查一下你从服务器得到了什么吗？有一个断点或 console.log 那里

收到响应后是否更新状态？

首先检查控制台中 this.state.progressData 值的类型，如果是整数则使用 === 1 或者如果其字符串使用 === '1'。或者如果值为 0 或 1，则无需使用比较运算符，您可以直接应用。 （this.state.progressData）？ '真案例' : '假案例';

是的，我在渲染中安慰了progressData。我最初得到一个空数组，但后来我得到了响应。为什么这样请检查这个i.stack.imgur.com/p7Xgi.png。还更新了我上面的代码

progressData 有一个成员“status”，你不应该检查progressData.status 吗？

【参考方案1】：

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

试试下面的代码。

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

【讨论】：

是的，尝试了这段代码，但没有呈现任何内容。我有疑问，在我的代码中将状态设置为数组有什么问题吗？我会向您解释清楚，当单击上一页中的按钮时，我将直接进入此屏幕。那么，如何在此页面中管理获取？我应该使用ComponentDidMount 吗？因为当我从服务器控制台响应时，初始响应将是空数组。那么只有我会得到响应。那么我该如何在这里管理呢？因为我认为在检查条件时它将采用这个空数组。请指导我..

@anu 你在 api 响应中得到了什么？带有状态键的数组或对象？做控制台日志并分享 api 响应

@anu 看起来你正在获取对象

这是我在i.stack.imgur.com/alffv.png之前安慰时得到的回应

哇..太棒了..非常感谢您...我如何在这里再检查一个条件？这意味着现在我正在检查是status == 1 还是其他。如何检查 else if 条件？因为我正在尝试渲染一些 UI。在 Pending ， Inprogress 和最后 done 的情况下@