reactJS 和动态渲染和变量填充

Question

我想在我的 render() 中动态生成输出，但我遇到了一个非常奇怪的情况。我有一个过程，我使用 fetch() 从数据库中检索一些数据。取回数据后，我确定数据记录的数量，然后执行 for 循环以使用返回的数据填充数组。我在 for 循环之前有一个 console.log() 来显示我的数据接收数组的内容，在我填充接收数组时还有另一个 console.log()。出于某种原因，当我填充数组的特定出现时，数组的所有出现似乎都在变化。这是我拥有的全部代码：

import React from 'react';
import '../styles/app.css';


class testpage extends React.Component {


constructor(props) {
    super(props);
    this.state = {
        productArray: []
    };

}


componentWillMount() {

    var tempData = '';
    var numberOfRecords = 0;

    let url = "http://wmjwwebapi-dev.us-west-2.elasticbeanstalk.com/api/getdata";
    const options = { method: 'GET' };

    fetch(url, options)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        if (myJson == undefined) 
        {
            console.log("fetch failed");
        } 
        else 
        {
            //inspect the data that the WebAPI returned 
            var return_code = myJson[0].return_code;
            if (return_code == "Default Return code"){
                tempData = '';
                numberOfRecords = -2;
            } else {
                tempData = JSON.parse(myJson[0].return_string)
                numberOfRecords = tempData.barcode.length;

                var counter = 0;
                var productArray = new Array;
                var product = {
                    barcode: '',
                    name: '',
                    description: '',
                    image: '',
                    price: ''
                }


                for (counter=0;counter<numberOfRecords;counter++) {
                    product.barcode = tempData.barcode[counter];
                    product.name = tempData.name[counter];
                    productArray[counter] = product;
                }                  
            }
        }
    }); 
  }

render() {
    <div>
        <div>
            {this.state.productArray[0].barcode}
        </div>
    </div>
}

}

export default testpage;

当循环计数器 = 0 时，这是我在 console.log() 中看到的图像：

注意到 5000159459228 的条形码值了吗？该值被推入 productArray[0].barcode。这正是我所期望的。

当循环计数器 = 1 时，这是我在 console.log() 中看到的图像： 这里，读取的记录的条形码是 5000159459230。这个值应该进入 productArray1.barcode，如图所示。但是图片也显示productArray[0].barcode的值从5000159459228（第一条记录的值）变成了5000159459230（第二条记录的值）。

这是第三次循环的图像：

再次，barcode = 5000159459231 的新记录。似乎该值被推入 productArray2.barcode 但 productArray[0].barcode 和 productArray1.barcode 现在已更改。

这怎么可能？

最终，目标是动态呈现检索到的数据。

提前感谢您的帮助。

Answer 1

控制台输出通常可以依赖于原语，但不能依赖于对象。控制台实现特定于执行脚本的环境（浏览器）。

输出的是对象引用，而不是对象快照。当一个对象发生变化时，它在控制台中的表示也会发生变化。

请注意，在 Chrome 控制台中，该数组最初记录为 [] 空数组，而下一个日志条目是 [...] 非空数组。

要输出不追溯更改的对象快照，请使用console.log(JSON.stringify(array)) 或其他序列化的原始值。

Answer 2

我建议使用 chrome devtools 进行调试，并在数组填充的位置添加断点。
您也可以在代码中的任何位置添加debugger 然后它会提示devtools。 我第二次@estus 关于更改反映在您使用过控制台的对象更新上。

Answer 3

聊天后了解了数据的形状，在 Code Review 的帮助下，我们可以这样做：

const json = [{
  return_string: {
    "barcode": ["5000159459228", "5000159459229", "5000159459230"],
    "scan_date": ["20180825173416", "20180825173416", "20180825173416"],
    "name": ["Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)", "Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)", "Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)"],
    "description": ["Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)", "Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)", "Twix Twin Chocolate Bars - 50g - Pack of 6 (50g x 6 Bars) (1.76 oz  x  6)"],
    "image": ["http://thumbs2.ebaystatic.com/m/mv0sDuMCXy5TgjQFYC0CJAQ/140.jpg", "http://thumbs2.ebaystatic.com/m/mv0sDuMCXy5TgjQFYC0CJAQ/140.jpg", "http://thumbs2.ebaystatic.com/m/mv0sDuMCXy5TgjQFYC0CJAQ/140.jpg"],
    "price": ["1", "2", "3"]
  }
}];

const fakeRequest = () => new Promise( resolve =>
  setTimeout( () => resolve( json ) )
);

class App extends React.Component {
  state = {
    data: "",
  }

  componentDidMount() {
    fakeRequest()
      .then( res => {
        this.setState({
          data: res[0].return_string,
        })
      })
  }

  renderData = () => {
    const { data } = this.state;
    const values = Object.values(data);
    const keys = Object.keys(data);
    
    const transposed = values[0].map((col, i) =>
      values.map(row => row[i]));
    
    const items = transposed.map(itemArr =>
      keys.reduce((acc, key, i) => (
        { ...acc, [key]: itemArr[i] }), {})
    );
    
    return items.map( item => (
      <div style={{ border: "1px solid black", marginBottom: "3px" }}>
        <p>Barcode: {item.barcode}</p>
        <p>Scan date: {item.scan_date}</p>
        <p>Name: {item.name}</p>
        <p>Description: {item.description}</p>
        <p>Image: {item.image}</p>
        <p>Price: {item.price}</p>
      </div>
    ) )
  }

  render() {
    return <div>{this.state.data && this.renderData()}</div>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

困难的部分是将数据正确地转换为对象数组。因为，这种数据形状对我来说有点奇怪:) 一个包含数组属性的对象。这些数组元素按顺序匹配。呼:)