Question

我有这样的二维数组;

我需要使用 map 函数来显示与数组长度一样多的 div 元素。

我将状态保存到 localStorage ，以防止刷新页面后数据消失。

const conditions = JSON.parse(localStorage.getItem("condition")).map((condition, index) => {
            return <div key={index} className="card bg-color-primary" style={{ height: "170px", width: "300px", borderColor: "#1E90FF", backgroundColor: "white", borderWidth: "2px" }}>
                    {_.isEmpty(this.state.rule.condition) ?
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">New Condition</span>
                            <p>Click to edit</p>
                        </div> :
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">{condition.property}</span>
                            <p>{condition.operator + " " + condition.value}</p>
                        </div>}
                    <div className="card-action">
                        <a href="javascript:;" style={{ color: "red" }}>OR</a>
                        <a href="javascript:;" style={{ color: "black" }}>AND</a>
                        <a onClick={this.handleOpen} style={{ color: "gray", cursor: "pointer" }}>EDIT</a>
                    </div>
                </div>
        });

在此代码范围之后，它会抛出类似的错误

未捕获TypeError：localStorage.getItem（...）。map不是函数

注意：我已经有了JSON.parse但是忘了在这里添加它，所以这不是实际问题。我的坏。

Answer 1

存储在localStorage中的数据不是2D数组，而是具有键name, operator, property, value的对象。要使用map，数据应该是一个数组。指定要在哪个（字段）数组上运行映射。

同样重要的是，localStorage将返回字符串化值，因此您需要先解析它。

示例 - 运行name值的地图：

JSON.parse(localStorage.getItem("condition")).name.map(.....)

或者，如果您想在map上运行object，请先使用 Object.keys() （返回所有键的数组）或 {{ 3}} （返回所有值的数组）先获取数组然后再运行map。

检查此代码段：

let obj = {
   a: [1,2,3],
   b: [4,5,6]
}

Object.keys(obj).map(el => {
   console.log('key', el);
   obj[el].map(sub_el => console.log(sub_el));
})

使用.map函数进行二维数组 - React

1 个答案: