2次元配列の.map関数の使用 - 反応

Question

私はこのような2次元配列を持っています。

そして私は、配列の長さと同数の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> 
     }); 

このコードのスコープの後では、次のようなエラーが発生します。

Uncaught TypeError: localStorage.getItem(...).map is not a function

注：私はすでにJSON.parseを持っていますが、それは実際の問題ではありませんので、ここでそれを追加するのを忘れ。私の悪い。

Answer 1

localStorageに保存したデータは2次元配列ではなく、name, operator, property, valueのキーを持つオブジェクトです。マップを使用するには、データを配列にする必要があります。

マップを実行する配列（配列）を指定します。 name値の

例マップ：

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

それとも、objectにmapを実行したい場合は、最初Object.keys()がまたは全てのObject.values（リターン・アレー（すべてのキーの配列を返す）を使用します値）を取得して配列を取得し、次に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)); 
 
})