Блог

Я немного запутался, почему я не могу передавать извлеченные данные между двумя функциональными компонентами. Я попытался использовать перехваты, и он вернул сообщение об ошибке, предлагающее использовать массив для объекта [Promise]. Есть идеи, что я здесь пропустил? Я довольно новичок в React. Буду признателен за любую помощь!

 // Component A
function App() {
  const apiURL = "https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1=1amp;outFields=*amp;outSR=4326amp;f=json";
  const apiData = fetch(apiURL)
                    .catch(err=>console.log(err))
                    .then(data=>console.log(data));
  return (
    <div>
      <h1>Hello</h1>
      <DataVisualize data={apiData}/>
    </div>
  );
}

// Component B
function DataVisualize(props){
    return <div>{props.data}</div>;
}
  

Ваш apiData не содержит фактических данных, которые вы хотите — это только обещание. Он catch также находится в неправильном месте (ставьте .catch после .then s), и вам нужно вызвать .json or .text в ответе (возвращаемом значением разрешения fetch ), чтобы получить обещание, которое преобразует фактические данные, которые вам нужны.

Установите некоторое состояние, когда вместо этого извлекаются конечные данные:

 // Component A
function App() {
  const apiURL = "https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1=1amp;outFields=*amp;outSR=4326amp;f=json";
  const [data, setData] = useState();
  useEffect(
    () => {
      fetch(apiURL)
        .then(res => res.json())
        .then(setData)
        .catch(console.error); // handle errors
    },
    [] // run this only once, on mount
  );
  return (
    <div>
      <h1>Hello</h1>
      { data amp;amp; <DataVisualize data={data}/> }
    </div>
  );
}

// Component B
function DataVisualize(props){
    return <div>{props.objectIdFieldName}</div>;
}
  

Также обратите внимание, что результат, похоже, не обладает каким-либо .data свойством (хотя у него есть objectIdFieldName свойство, поэтому я привел его в качестве примера).