将变量放入 render() return - React Native答案

【问题标题】：Putting a variable inside render() return - React Native将变量放入 render() return - React Native
【发布时间】：2018-10-31 04:06:21
【问题描述】：

我是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。哪个是奇怪的，因为它是被定义的？

【问题讨论】：

map 代码你放哪里了？它在任何函数内或类外
result_id 计算在哪里？该错误意味着该变量在 render() 范围内不可用。
我的map 代码在render() 之上，所有内容都在类内。除了 css。
你需要学习一些 React 基础知识，比如在哪里发出异步请求以及如何将响应设置为状态并将其渲染出来
这是因为您使用 const 值在渲染中显示来自 api 调用的数据，并且最初该值不存在，因此出现未定义的错误。发布您用来调用 api 的代码。只有在它的响应中，您才能触发重新渲染，这将使您显示该值。

标签： json reactjs react-native jsx

【解决方案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 问题可以通过测试数据数组长度是否大于零来解决。这通常发生在 render 没有返回任何内容时。
我使用了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
}

【讨论】：

我喜欢它，但我收到了这个错误：Cannot add a child that doesn't have a YogaNode to a parent without a measure funtion!。 key 应该在View 中吗？ @RaajNadar
试试我的第二种方法可能你正在从服务器加载数据？对，是的，键是必需的，因为它是针对特定元素的唯一唯一属性。
没错，我来自该服务器的 json 数据已经在一个对象中。我找到了Yoganode错误背后的原因，如果加载了数据，我该如何测试？
我用大量信息和测试代码更新了我的答案！ @LaneyWilliams
对不起，我很感激这一切，但即使我将 val.id 更改为“嗨”，我也无法通过该错误。

【解决方案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>
   );
  }

【讨论】：

ComponentDidMount 可以在render() 内吗？
不，ComponentDidMount 它是生命周期方法，它应该在渲染之外。 @LaneyWilliams
ComponentDidmount 是生命周期函数，您不能将其放入渲染中。在 componentDidMount 中进行 API 调用并将 api 结果存储在状态中，其余代码在示例中。只需浏览 React 文档
@Revansiddh 我现在明白了！太感谢了！这也会有帮助！