Pengaturan dan lingkungan: Aplikasi dibuat dengan create-react-app, terdapat di App.js, dan dijalankan menggunakan npm start di baris perintah.

Kode sumber wajib:

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';

async function getRemoteData() {
  var result = [];
  const response = await fetch('some.site.that.returns.json'); // not the actual URL although you get the idea
  const json = await response.json();
  for (const entry of json.entry) {
    result.push(json.fullUrl);
    console.log(json.fullUrl);
  }
  console.log("String representation");
  console.log(result.toString());
  // Following commented string used to test ReactJS functionality
  // return "";
  return result.toString(); 
}

// minimalist self-explanatory class that dumps a message to the browser
class Message extends React.Component {
    render() {
      return (
        <div>
          <h2>{this.props.text}</h2>
        </div>
      );
    }
}

function App() {
  return ReactDOM.render(<Message text={getRemoteData()} />, document.getElementById('root'));
}

export default App;

Ini hanya menghasilkan kesalahan yang tidak membantu dan tidak dapat dilacak:

Kesalahan: Objek tidak valid sebagai anak Bereaksi (ditemukan: [janji objek]). Jika Anda bermaksud merender koleksi anak-anak, gunakan array sebagai gantinya. di h2 (di App.js:23) di div (di App.js:22) di Message (di App.js:31)

Pertama, getRemoteData tidak boleh mengembalikan Janji sama sekali. Itu harus mengembalikan string - sangat jelas dari pernyataan pengembalian. Saya menggunakan jawaban kudlajz di Ambil: setel variabel dengan ambil respons dan kembalikan dari fungsi - menggunakan menunggu untuk memperbaiki aspek asinkron dan kemudian mengembalikan nilai yang mendasarinya.

Selanjutnya, saya mengatur getRemoteData untuk mengembalikan string kosong dengan sengaja - uji ReactJS. Hasil yang sama Jika mengklaim string kosong adalah objek yang tidak valid, itu masalah serius. Selanjutnya, ini sama sekali tidak memberikan info tentang apa yang salah. Ada ide bagaimana agar ini berfungsi? Mengapa Objek (bukan string) dikembalikan sama sekali?

-4
user1258361 10 Maret 2020, 01:04

1 menjawab

Jawaban Terbaik

getRemoteData adalah fungsi async. Ini mengembalikan Janji, yang merupakan objek.

Untuk menangani data asinkron, Anda perlu menyimpan hasilnya dalam status dan menggunakannya sebagai gantinya.

Lihat juga FAQ React: AJAX dan API

6
Quentin 9 Maret 2020, 22:06