时间戳

首页 > 解决方案 > 在反应组件中使用变量作为全局变量的问题

javascript - 在反应组件中使用变量作为全局变量的问题

问题描述

我正在尝试在我的反应组件中使用来自 API 的数据：

let request = new XMLHttpRequest()
let output = []

request.open('GET', 'http://localhost:3005/products/157963', true)
request.onload = function() {
let data = JSON.parse(this.response)
output.push(data);
  if (request.status >= 200 && request.status < 400) {
  console.log(output[0].brand);
} else {
  console.log('error');
}
}

request.send()

const item_box = (
<ItemPanel>
  <ItemBox>
    <BoxTitle>{output[0].brand}</BoxTitle>
   </ItemBox>
   <BoxImg src={require("./ucfnti1.jpg")} alt='img error'></BoxImg>

);

问题是 (output[0].brand) 元素呈现为空，而

console.log(output[0].brand);

在控制台中打印正确的值：/

标签： javascriptreactjs

解决方案

您需要将此变量添加到状态并在从服务器获得响应时更新它

在您的组件中，您需要：1）使用“输出”设置状态

this.state = {
  output: []
}

2) 收到响应时更新状态

request.open('GET', 'http://localhost:3005/products/157963', true)
request.onload = function() {
let data = JSON.parse(this.response)
this.setState(prevState => ({output: [...prevState.output, data]}))

3）从您的状态呈现一个值

<ItemPanel>
  <ItemBox>
    <BoxTitle>{this.state.output[0].brand}</BoxTitle>
   </ItemBox>
   <BoxImg src={require("./ucfnti1.jpg")} alt='img error'></BoxImg>

推荐阅读