尽管在其他地方成功,但异步对象不会从 getInitialProps 返回
Async object does not get returned from getInitialProps despite success elsewhere
我刚刚开始通过将来自不同部分和在线课程的一些代码放在一起来了解 React。
我正在使用 React、Next 和 Axios 从加密货币服务器获取 API。
我面临的主要问题是:
- 我能够 console.log(coinObjects) 在 getInitialProps 下,它正确显示了对象
- 尽管如此,coinObjects 不会在{this.props.coinObjects}
中呈现
- 作为一个可能的线索,linksArr 确实在{this.props.linksArr}
中呈现
我的代码如下:
class MainIndex extends Component {
static async getInitialProps(props) {
// setup - empty array and list of coins
const coinList = ["NEO", "ETH", "BTC"];
const numCoins = coinList.length;
const coinObjects = [];
const linksArr = [];
const isServer = typeof window === "undefined";
// API GET
const baseUrl = "https://min-api.cryptocompare.com/data/histohour?";
for (let coinName of coinList) {
linksArr.push(
baseUrl.concat("fsym=", coinName, "&tsym=", "USD", "&limit=", "3")
);
}
const getObj = async linksArr => {
try {
let res = await axios.all(linksArr.map(l => axios.get(l)));
for (let i = 0; i < linksArr.length; i++) {
coinObjects[coinList[i]] = res[i].data.Data;
}
} catch (err) {
console.error(err);
}
};
await getObj(linksArr);
console.log(coinObjects);
// Return updated arrays
if (isServer) {
return { coinObjects, numCoins, linksArr };
} else {
return {};
}
}
render() {
return (
<Layout>
<h2>
CoinObject has {this.props.coinObjects.length} coins
// Returns 0
<br />
LinksArr has {this.props.linksArr.length} links
// Returns 3
</h2>
</Layout>
);
}
}
有人能帮帮我吗?我已经用尽了我能找到的所有 Google 搜索、Whosebug 帖子和编码朋友(只有 1 个)。我不知道哪里出了问题,我希望这不是一个愚蠢的问题,因为我一直在进行广泛的调整和更改,但还没有弄清楚哪里出了问题。
此处coinObject
设置为一个数组:
const coinObjects = [];
但后来被当作对象处理:
coinObjects[coinList[i]] = res[i].data.Data;
这意味着您需要像这样添加到数组中:
for (let i = 0; i < linksArr.length; i++) {
let data = res[i].data.Data;
let name = coinList[i];
coinObjects.push({ name: name, data: data });
}
我刚刚开始通过将来自不同部分和在线课程的一些代码放在一起来了解 React。
我正在使用 React、Next 和 Axios 从加密货币服务器获取 API。
我面临的主要问题是:
- 我能够 console.log(coinObjects) 在 getInitialProps 下,它正确显示了对象
- 尽管如此,coinObjects 不会在{this.props.coinObjects} 中呈现
- 作为一个可能的线索,linksArr 确实在{this.props.linksArr} 中呈现
我的代码如下:
class MainIndex extends Component {
static async getInitialProps(props) {
// setup - empty array and list of coins
const coinList = ["NEO", "ETH", "BTC"];
const numCoins = coinList.length;
const coinObjects = [];
const linksArr = [];
const isServer = typeof window === "undefined";
// API GET
const baseUrl = "https://min-api.cryptocompare.com/data/histohour?";
for (let coinName of coinList) {
linksArr.push(
baseUrl.concat("fsym=", coinName, "&tsym=", "USD", "&limit=", "3")
);
}
const getObj = async linksArr => {
try {
let res = await axios.all(linksArr.map(l => axios.get(l)));
for (let i = 0; i < linksArr.length; i++) {
coinObjects[coinList[i]] = res[i].data.Data;
}
} catch (err) {
console.error(err);
}
};
await getObj(linksArr);
console.log(coinObjects);
// Return updated arrays
if (isServer) {
return { coinObjects, numCoins, linksArr };
} else {
return {};
}
}
render() {
return (
<Layout>
<h2>
CoinObject has {this.props.coinObjects.length} coins
// Returns 0
<br />
LinksArr has {this.props.linksArr.length} links
// Returns 3
</h2>
</Layout>
);
}
}
有人能帮帮我吗?我已经用尽了我能找到的所有 Google 搜索、Whosebug 帖子和编码朋友(只有 1 个)。我不知道哪里出了问题,我希望这不是一个愚蠢的问题,因为我一直在进行广泛的调整和更改,但还没有弄清楚哪里出了问题。
此处coinObject
设置为一个数组:
const coinObjects = [];
但后来被当作对象处理:
coinObjects[coinList[i]] = res[i].data.Data;
这意味着您需要像这样添加到数组中:
for (let i = 0; i < linksArr.length; i++) {
let data = res[i].data.Data;
let name = coinList[i];
coinObjects.push({ name: name, data: data });
}