Как вы получаете доступ к объекту с ключами как дочерний элемент React?- Реагируй Родной - PullRequest
Новая
       7

Как вы получаете доступ к объекту с ключами как дочерний элемент React?- Реагируй Родной

0 голосов
/ 21 мая 2018

Я пытаюсь отобразить эти данные 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 {
}

1 Ответ

0 голосов
/ 21 мая 2018

Я вижу ошибку при передаче аргумента i в вашей функции карты, пожалуйста, посмотрите на этот простой пример того, как использовать карту для рендеринга <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>
...