作为 React 子节点，您如何使用键访问对象？ - 反应原生

Question

我正在尝试显示此 JSON 数据：

[  
   {  
      "id":"1",
      "imagename":"dog"
   },
   {  
      "id":"2",
      "imagename":"cat"
   },
   {  
      "id":"3",
      "imagename":"mouse"
   },
   {  
      "id":"4",
      "imagename":"deer"
   },
   {  
      "id":"5",
      "imagename":"shark"
   },
   {  
      "id":"6",
      "imagename":"ant"
   }
]

这是我必须显示该数据的当前代码：

 componentDidMount(){
     fetch(`http://www.example.com/React/data.php`, {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
   }).then((response) => response.json())
       .then((responseJson) => {

      this.data = responseJson;
      this.setState({ loading: false });


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

}

     return(

         <View style = { styles.MainContainer }>
          <View>
           <Card>          
              <View>
              <Text>{this.data.id}</Text>
              <Text>{this.data.imagename}</Text>
             </View>
           </Card>
           </View>
         </View>
       );

我的结果是什么都没有显示，但是当我只有 this.data 时，我再次得到带有键的对象错误。

查找类似的答案以找到我的问题，然后我尝试.map，但我不断收到cannot not find variable: i：

this.data =  responseJson.map(item => ({ ...item, i }))

最后，这是我尝试的其余代码：

return(

     <View style = { styles.MainContainer }>
      <View>
       <Card>          
          <View key={i}>
          <Text>{item.id}</Text>
          <Text>{item.imagename}</Text>
         </View>
       </Card>
       </View>
     </View>
   );

当我将我的 json 数据放入一个数组时，什么都没有显示，因为（我猜）键之间没有逗号。像这样：

{"id":"1","imagename":"dog"}{"id":"2","imagename":"cat"}{"id":"3","imagename":"mouse"}{"id":"4","imagename":"deer"}{"id":"5","imagename":"shark"}{"id":"6","imagename":"ant"}

如果有人需要查看我的data.php：

回声对象

    $dsql = "SELECT * FROM random";

$dresult = $con->query($dsql);

if ($dresult->num_rows >0) {


 while($drow[] = $dresult->fetch_assoc()) {

 $dtem = $drow;

 $djson = json_encode($dtem);


 }

} else {
}
echo $djson;

回声阵列

$dsql = "SELECT * FROM random";

$dresult = $con->query($dsql);

if ($dresult->num_rows >0) {


 while($drow = $dresult->fetch_assoc()) {

 $dtem = $drow;

 $djson = json_encode($dtem);
 echo $djson;

 }

} else {
}

Answer 1

我可以看到您在 map 函数上传递参数 i 的方式出现错误，请看一下如何使用 map 渲染 <li> 元素的这个简单示例。

var dataSample = [
  { "id": "1", "imagename": "dog" },
  { "id": "2", "imagename": "cat" },
  { "id": "3", "imagename": "mouse" },
  { "id": "4", "imagename": "deer" },
  { "id": "5", "imagename": "shark" },
  { "id": "6", "imagename": "ant" }
];

const App = () => (
  <div>
    <ul>
    {dataSample.map((data, i) => {
        return <li key={i}>{i + ' - ' + data.imagename}</li>
    })}
    </ul>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>