作为道具传递时，响应获取返回的__proto__对象
当我将获取的数据传递给支持时，它会在组件中返回一个额外的proto对象。在将数据传递给支持之前，当我用componentDidMount()记录数据时，它会返回我希望使用的正确的单一对象格式。但是，当我把它作为道具传递下来时，它会返回两个对象。一个带有proto，另一个是正确格式化的对象。
如何将单个对象格式传递给道具？
Api端点
export const fetchWorldData = async () => {
try {
const response = await axios.get(worldData);
return response;
} catch (error) {
console.log(error);
}
};App.js -将获取数据设置为状态对象并将其传递给道具
注意:回调中的console.log
import React from 'react';
import { WorldDisplay } from './components';
import { fetchWorldData } from './api';
class App extends React.Component {
state = {
worldData: {},
};
async componentDidMount() {
const fetchedWorldData = await fetchWorldData();
this.setState(
{
worldData: fetchedWorldData,
}, () => {
//Callback returns correctly formatted data
console.log(fetchedWorldData);
}
);
}
render() {
const {worldData} = this.state;
return (
<div>
// pass data as props to WorldDisplay component
<WorldDisplay data={worldData} />
</div>
);
}
}
export default App;正确的单目标格式的Console.log
具有获取数据支持的组件。
import React from 'react';
const WorldDisplay = (data) => {
// console.log returns two objects, one __proto__ one correctly formatted
console.log(data);
return (
<div>
<h1>Hello Wold</h1>
</div>
);
};
export default WorldDisplay;不想要的两个对象的console.log
虽然我尝试过console.log(data.data.data)并在WorldDisplay组件中进行析构，但它返回了第一个proto对象上的未定义对象，而且我无法导航第二个正确的对象，因为它引用的是两个具有不同响应体的对象。这里我的意图是只返回第二种正确的格式，这样我就可以正确地导航它。
回答 1
Stack Overflow用户
发布于 2020-07-14 18:46:49
好的，如果每次状态变化时调用React组件的呈现方法。因此，场景后面发生的情况是，状态属性worldData最初是空对象，WorldDisplay组件以空对象作为worldData支柱。fetchWorldData是一个异步fn，所以当它返回结果时，它将更新状态属性worldData；这再次触发render方法。如果要避免呈现子组件是worldData对象为null或未定义，则可以使用三元运算符有条件地呈现它。
{worldData? <WorldDisplay data={worldData} /> : <></>}并且必须将状态变量worldData的初始值设为null。
顺便说一句，您不必将您的componentDidMount作为异步；因为fetchWorlddata函数本身就是一个异步方法。你可以把它重写为
componentDidMount() {
const worldData = fetchWorldData();
this.setState(
{
worldData //Feature of ES6, this is equivalent to worldData : worldData
}, () => {
//Callback returns correctly formatted data
console.log(fetchedWorldData);
}
);
}https://stackoverflow.com/questions/62901444
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号