Javascript 反应：为什么可以'；我是否将数据从一个功能组件传递到另一个功能组件？

对于为什么不能在两个功能组件之间传递获取的数据，我有点不知所措。我试图使用钩子，但它返回了一条错误消息，建议对对象[Promise]使用数组。知道我错过了什么吗？我还没反应过来。任何帮助都将不胜感激

// Component A
function App() {
  const apiURL = "https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&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>;
}

//组件A
函数App（）{
常量apiURL=”https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json”；
const apiData=fetch（apirl）
.catch（err=>console.log（err））
.then（data=>console.log（data））；
返回(
你好
);
}
//B部分
功能数据可视化（道具）{
返回{props.data}；
}

您的

apiData

不包含您想要的实际数据-这只是一个承诺。它的

catch

也位于错误的位置（将

.catch

放在

.then

s之后），您需要在响应上调用

.json

或

.text

（由

fetch

的resolve值返回），以获得解析为您需要的实际数据的承诺

取而代之的是在检索最终数据时设置一些状态：

// Component A
function App() {
  const apiURL = "https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&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 && <DataVisualize data={data}/> }
    </div>
  );
}

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

//组件A
函数App（）{
常量apiURL=”https://services9.arcgis.com/M4Su6cnNT6vqupbh/arcgis/rest/services/COVID19_Data/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json”；
const[data，setData]=useState（）；
使用效果(
() => {
获取（APIRL）
.then（res=>res.json（））
.then（设置数据）
.catch（console.error）；//处理错误
},
[]//仅在装载时运行一次
);
返回(
你好
{数据&&}
);
}
//B部分
功能数据可视化（道具）{
返回{props.objectIdFieldName}；
}

---

还要注意的是，结果似乎没有任何

.data

属性（尽管它确实有一个

ObjectedFieldName

属性，所以我把它作为一个例子放进去）。

您好，感谢您的详细解释。我的问题不清楚。url返回json数据。我还需要使用res.json（）吗？这是我困惑的另一部分。是的

fetch

在收到响应头时解析，然后您需要等待另一个承诺，以完全接收响应体。