映射json结果反应本机

时间:2019-12-06 20:00:25

标签: reactjs react-native

我需要映射json结果,但是当我尝试执行此操作时,出现错误:

  

[TypeError:未定义不是对象(正在评估'item.regions.map')]

能帮我吗?我尝试从单词中获取文字,其中单词来自线和区域中的线

我将非常感谢您的帮助

Json结果:

{
  "language": "en",
  "textAngle": 0,
  "orientation": "Up",
  "regions": [
    {
      "boundingBox": "242,118,178,147",
      "lines": [
        {
          "boundingBox": "242,118,99,43",
          "words": [
            {
              "boundingBox": "242,118,99,43",
              "text": "LIVE,"
            }
          ]
        },
        {
          "boundingBox": "244,172,143,44",
          "words": [
            {
              "boundingBox": "244,172,143,44",
              "text": "WORK,"
            }
          ]
        },
        {
          "boundingBox": "246,227,174,38",
          "words": [
            {
              "boundingBox": "246,227,174,38",
              "text": "CREATE"
            }
          ]
        }
      ]
    }
  ]
}

代码:

{
    this.state.data.map(((item, index) =>
      <View key={index}>
            <Text>{item.language}</Text>
            {item.regions.map(el => {
            <Text>{el.boundingBox}</Text>
            })}
          </View>
    ))
}

一些新变化:

 this.state = {
      data: [],
    };
    
    fetch(uriBase,
{
 
 method: 'POST',
 headers: 
 {
  'Content-Type': 'multipart/form-data',
     'Ocp-Apim-Subscription-Key': subscriptionKey,
 },
 body: data,


}).then((response) => response.json()).then((data) =>
{

  const returnedData = JSON.stringify(data, null, 2);

  this.setState({
    data: this.state.data.concat(returnedData),
  })

}).catch((error) =>
{
 console.log(error);

});
  };

2 个答案:

答案 0 :(得分:1)

您应该在进行.map之前进行一些检查,并在Text内返回.map

// checking 
this.state.data && this.state.data.map(((item, index) =>
  <View key={index}>
        <Text>{item.language}</Text>
        // checking region before .map
        {item.regions && item.regions.map(el => {
            // you forgot the return 
            return <Text>{el.boundingBox}</Text>
        })}
      </View>
))

答案 1 :(得分:0)

尝试一下是否可行

    {
        let data = [this.state.data]
        data.map(((item, index) =>
          <View key={index}>
                <Text>{item.language}</Text>
                {item.regions && item.regions.map(el => {
                <Text>{el.boundingBox}</Text>
                })}
              </View>
        ))
    }