反应状态和 JSON 和数组 => 错误结果

Question

编辑：所以，我找到了我最初问题的解决方案，这让我意识到我还有另一个问题。

好像比我想象的要简单

setNumbers(e) {
    e.preventDefault();
    var already_exists = false;
    var ls_data = this.state.storedNumbers;

    var rname = document.getElementById('name').value;
    var rnumb = document.getElementById('nummer').value;
    var ls_key = this.state.ls_key;

    for (key in ls_data) {
        if(ls_data.hasOwnProperty(key) === true) {
            if(ls_data[key].name === rname) {
                if(ls_data[key].Number === rnumb) {
                    already_exists = true;
                }
            }
        }
    }

    if(!already_exists) {
        ls_key++;
        ls_data[ls_key] = {
            name: rname,
            Number: rnumb
        };

        localStorage.setItem("ls_numbers", JSON.stringify(this.state.storedNumbers));
        localStorage.setItem("ls_key", ls_key); 

        this.setState({
            ls_key: localStorage.getItem("ls_key"),
        });

    }
}

但现在我的问题是，我无法对其进行迭代，因为它是嵌套对象而不是数组。所以 .map 将不起作用（this.state.storedNumbers.map 不是函数）。

遗憾的是，将 storedNumber 更改为数组并不能解决问题，因为

        ls_data[ls_key] = {
            name: rname,
            Number: rnumb
        };

在数组中不起作用。所以现在我的问题是。我可以使用我的 ls_key 变量在我的数组中创建一个名称对象吗？使用上面的代码会导致：

[
    null,
    {
        "name" : "Person 1",
        "Number" : "XXXXXXXX"
    },
    {
        "name" : "Person 2",
        "Number" : "XXXXXXXX"
    }
]

数组应该如下所示：

[
    "1": {
        "name" : "Person 1",
        "Number" : "XXXXXXXX"
    },
    "2": {
        "name" : "Person 2",
        "Number" : "XXXXXXXX"
    }
]

或者有没有办法迭代嵌套的 JSON 结果，就像 .map 对数组所做的那样？

Answer 1

那好吧，我自己想通了：

我的数据格式错误的原因（最初的问题），对此仍然很困惑。我已经更改了很多代码并再次恢复到原始代码，等等，奇迹般地一切正常。不能告诉你有什么区别。之后我可以轻松地简化代码，如编辑后的问题所示。

为了遍历数据，下面的代码是我的解决方案。如果您有更清洁的解决方案，请告诉我！

{this.state.storedNumbers.length < 1
    ?   <li className='list-group-item'><strong>Geen recente nummers...</strong><span className='pull-right'><span className='glyphicon glyphicon-warning glyph-xl'></span></span></li>
    :   Object.keys(this.state.storedNumbers).map((number) => { 
            return (
                <div className='item' key={number}>
                    <a className='list-group-item list-link'>
                        <strong>{this.state.storedNumbers[number].name}</strong> - ({this.state.storedNumbers[number].Number})
                    </a>
                    <span className='button-delete glyph-xl'>
                        <i className='glyphicon glyphicon-trash glyph-xl' aria-hidden='true'></i>
                    </span>
                </div>
            )})
}

反应状态和 JSON 和数组 => 错误结果

React state and JSON and arrays => faulty result

iteration

json

states

local-storage

reactjs