Question

我从PostgresSQL服务器获取数据，并使用以下命令将它们放入数组：

var that = this;
var temp = [];
await fetch(req)
  .then(function(res) {
    res.json().then(function(data) {
      for (var i in data) {
        temp.push([
          data[i].flavor
          data[i].addons,
          data[i].price
        ]);
      }
      that.setState({
        thatArray: temp
      });
    });
  })

console.log(this.state.thatArray);

console.log(this.state.thatArray)的结果如下：

https://i.imgur.com/tO9Uszz.jpg

我想以这种形式重复显示数据直到数组的结尾（下图示例）

<div className="row-container">
  <div className="flavor-name">
    <div>Milk</div>
  </div>

  <div className="add-tab">Add</div>

  <div className="add-tab-list">
    <li>- Cereal</li>
    <li>- Red Jelly</li>
    <li>- Peach</li>
    <li>- Honey Star</li>
  </div>

  <div className="price-text" style={{ textAlign: "right", marginRight: "20px" }}>
    40 USD
  </div>
  <hr />
</div>

示例结果：（https://i.imgur.com/oFaEQfa.jpg）

我以前使用过array.map()，但是只用一个数组来做列表。当我尝试使其与这种数组一起使用时，这非常令人困惑。有没有显示数据的简单方法？

编辑：Phix建议的渲染方法效果很好。但是我仍然对数组有疑问。

这是我的componentWillMount()和getProducts()

componentWillMount() {
    this.setState({
       bag: getProducts()
    });
}

function getProducts() {
  let uid = {
    userID: localStorage.getItem("user")
  };

  var req = new Request("/user/order", {
    method: "POST",
    headers: new Headers({
      "Content-Type": "application/json",
      Accept: "application/json"
    }),
    body: JSON.stringify(uid)
  });

  var temp = [];

  fetch(req)
    .then(function(res) {
      res.json().then(function(data) {
        for (var i in data) {
          temp.push([
            data[i].flavor,
            data[i].addons,
            data[i].price
          ]);
        }
      });
    })
    .catch(function(err) {
      console.log(err);
    });

  console.log(temp);


  return temp;

  //return [
  //  ["Milk", ["Item 1", "Item 2", "Item 3"], "40"],
  //  ["Charcoal", ["Item 1a", "Item 2a", "Item 3a"], "45"],
  //  ["Ham", ["Item 1b", "Item 2b", "Item 3b"], "30"]
  //];
}

问题在于，只有当我直接声明返回的数组时，它才起作用。

return [
["Milk", ["Item 1", "Item 2", "Item 3"], "40"],
["Charcoal", ["Item 1a", "Item 2a", "Item 3a"], "45"],
["Ham", ["Item 1b", "Item 2b", "Item 3b"], "30"]
];

当我返回temp数组时，它不起作用。屏幕上什么都没有显示。

return temp;

我注意到数组不同。

https://i.imgur.com/Z4SGtHZ.png

两个数组的图片中的第一行不相同。上面的一个是获取的响应中的数组，而下面的是手工输入的数组。

编辑：我发现控制台为live，第一次调用时内容为空，因此第一行看起来为空。但是仍然无法解决我的问题。

此外，当返回temp时，引用bag[0]不会给出任何结果，并且bag[0][1]将导致Uncaught TypeError: Cannot read property '1' of undefined，而当getProducts()返回手动键入的数组时，一切都将正常运行

编辑：加载所有内容并显示所有数据后，我尝试在按钮单击上进行this.setState({ bag: this.state.bag });。自页面最初加载以来，有什么方法可以实现？

Answer 1

有“更严格的”方法，但这是一个希望使您入门的想法：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      bag: []
    };
  }

  componentWillMount() {
    this.setState({
      bag: getProducts()
    })
  }

  render() {
    const { bag } = this.state;

    const renderTitle = (index) => {
      return <h1>{bag[index][0]}</h1>
    }

    const renderItems = (index) => {
      const items = bag[index][1]
      return (
        <ul>
          {items.map(item => <li>{item}</li>)}
        </ul>
      )
    }

    const renderPrice = (index) => {
      return <div>{bag[index][2]}</div>
    }

    return (
      bag.map((group, index) => {
        return (
          <div>
            {renderTitle(index)}
            {renderItems(index)}
            {renderPrice(index)}
          </div>
        )
      })
    );
  }
}

render(<App />, document.getElementById('root'));

function getProducts() {
  return [
    ['Milk', ['Item 1', 'Item 2', 'Item 3'], '40'],
    ['Charcoal', ['Item 1a', 'Item 2a', 'Item 3a'], '45'],
    ['Ham', ['Item 1b', 'Item 2b', 'Item 3b'], '30'],
  ]
}

Stackblitz

修改：

temp之所以返回是因为它最初被视为一个空数组，但是一旦解析成功，它将显示您的期望。

var temp = [];            // [0] Start empty
fetch(req).then(() => {   // [1] Fire off async request and continue with event loop
  // ...                     [4] Once this resolves, temp gets populated
})
console.log(temp); //        [2] Event loop continues to here, showing empty array
return temp; //              [3] Nothing here

或者，通过async / await：

var temp = [];                   // [0] Start empty
const results = await fetch(req);// [1] Wait for async request and continue
console.log(temp);
return temp;                        [2] As expected

我已经用虚假请求更新了堆栈闪电，以呈现异步数据。

在React中反复从多维数组获取和显示数据

1 个答案: