Question

我是mapping json数据，可以console.log我的结果，但我无法在渲染中插入这些值。

以下是我渲染的代码：

data_use = responseJson;
     const result_id = data_use.map(function(val) {
      return val.id;
    }).join(',');
    console.log(result_id);
render(){
return(

     <View style = { styles.MainContainer }>
      <View>
       <Card>          
          <View>
          <Text>{result_id}</Text>
         </View>
       </Card>
       </View>
     </View>
   );
  }

我得到的错误是ReferenceError: result_id is not defined。哪个是奇怪的，因为它被定义了？

Answer 1

如果从服务器加载数据，此方法将非常有用。

constructor(props) {
  super(props);
  this.state = {
     data : []
  };

}

componentDidMount() {
   // Your code to fetch data from server

   this.setState({ data: your_array_from_fetch });
}

render(){
   return(
     <View style={ styles.MainContainer }>
        <View>
           <Card>          
              <View>
                {
                   this.state.data.length > 0 ?
                       this.state.data.map((val, index) => {
                           return (
                              <Text key={index}>val.id</Text>
                           );
                       } ).join(',');
                    : null
                 }
              </View>
           </Card>
         </View>
      </View>
  );
}

我从我身边做了一些假设，我相信这就是你想要的！如果有任何问题写下来。

编辑：

可以通过测试数据数组长度是否大于零来修复Yoganode问题。这通常发生在渲染不返回任何内容时。
我使用componentDidMount代替componentWillMount因为componentWillMount已被弃用。

尝试此条件渲染

{
    this.state.data.length > 0 ?
        this.state.data.map((val, index) => {
           if (some_var == another_var) {
              return (
                 <Text key={index}>val.id</Text>
              );
           }
        }).join(',');
    : null
}

Answer 2

你所做的一切都是正确的但你可以变declared outside render？如何在render

中访问它

render(){
//considering array of objects in "data_use" state
 const result_id = this.state.data_use.map(function(val) {
      return val.id;
    }).join(',');

return(

     <View style = { styles.MainContainer }>
      <View>
       <Card>          
          <View>
          <Text>{result_id}</Text>
         </View>
       </Card>
       </View>
     </View>
   );
  }

将变量放在render（）中返回 - React Native

2 个答案: