将变量放入render()返回值中 - React Native

Question

我正在映射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未定义。这很奇怪，因为它已经被定义了？

- Laney Williams

---

map代码放在哪里？它是放在函数内部还是类外部？ - Nishant Dixit

那个 result_id 的计算在哪里？这个错误意味着变量在 render() 的作用域中不可用。 - AKX

我的 map 代码位于 render() 上方，而且所有内容都在类内部，除了 CSS。 - Laney Williams

你需要学习一些React的基础知识，比如在哪里进行异步请求以及如何将响应设置为状态并渲染出来。 - Dominic

这是因为你正在使用一个常量值来展示来自API调用的数据在渲染中，而最初该值不存在，因此会出现未定义的错误。发布你用来调用API的代码。只有在它的响应中，你才能触发重新渲染，这将使你展示该值。 - Rohith Murali

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

我自己做了一些假设，我相信这就是你想要的！如果有任何问题，请在下面写下来。

编辑：

1. 可以通过测试数据数组长度是否大于零来修复Yoganode问题。这通常发生在渲染不返回任何内容时。
2. 我使用了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
}

- Rajendran Nadar

---

我喜欢它，但是我遇到了这个错误：无法将没有YogaNode的子项添加到没有测量函数的父项中！。key应该在View中吗？@RaajNadar - Laney Williams

尝试我的第二种方法，可能你正在从服务器加载数据？是的，关键是必需的，因为它是唯一用于定位特定元素的属性。 - Rajendran Nadar

我更新了我的答案，添加了大量的信息和经过测试的代码！@LaneyWilliams - Rajendran Nadar

如果没有敏感数据，可以粘贴代码，但不要删除旧的！ - Rajendran Nadar

让我们在聊天中继续这个讨论。 - Rajendran Nadar

Answer 2

您所做的一切都是正确的，但您在 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>
   );
  }

- Revansiddh

---

ComponentDidMount可以放在render()里面吗？ - Laney Williams

不，ComponentDidMount是生命周期方法，它应该在render之外。@LaneyWilliams - Rajendran Nadar

ComponentDidmount 是一个生命周期函数，你不能把它放在 render 函数中。在 componentDidMount 函数中进行 API 调用，并将 API 结果存储在状态中，其余的代码示例中已经提供。只需仔细阅读 React 的文档即可。 - Revansiddh

@Revansiddh 我明白了！非常感谢你！这也会很有帮助！ - Laney Williams