如何从当地人那里获得价值的反应

Question

我向本地存储添加数据，如下所示： function handleSave(event) {    let r = Math.random().toString(36).substring(7);    const productInfo = {      name: name,      ean: ean,      type: type,      weight: weight,      color: color,      active: active,    };    // const productInfo2 = [name, ean, type, weight, color, active];    localStorage.setItem(r, JSON.stringify(productInfo));  }我得到这样的本地存储映射：{Object.entries(localStorage).map(([key, value]) => {        return (          <div style={style.gridItemsContainer}>            <p>{value}</p>            <p>{value.name}</p>            <p>{value.name}</p>            <p>{value.name}</p>            <p>{value.name}</p>            <input checked={value.active} type="checkbox"></input>            <Link to={'/products/' + key}>VIEW</Link>            <Link to={'/products/' + key + '/edit'}>EDIT</Link>            <button>DELETE</button>          </div>        );      })}在第一段中，我得到这个：{"name":"kede","ean":"12","type":"baldas","weight":"20","color":"ruda","active":""}其他元素为空 我需要如何编辑我的代码，以便我可以通过键获取值，例如示例 value.name<p>

Answer 1

您将获得需要解析它的 JSON 字符串。

{Object.entries(localStorage).map(([key, valueJSON]) => {

       const value = JSON.parse(valueJSON);

        return (

          <div style={style.gridItemsContainer}>

            <p>{value}</p>

            <p>{value.name}</p>

            <p>{value.name}</p>

            <p>{value.name}</p>

            <p>{value.name}</p>

            <input checked={value.active} type="checkbox"></input>

            <Link to={'/products/' + key}>VIEW</Link>

            <Link to={'/products/' + key + '/edit'}>EDIT</Link>

            <button>DELETE</button>

          </div>

        );

      })}

Answer 2

我认为你的缺乏只是因为你需要它;)JSON.parse

为了从本地存储中获取值，最好在构造函数/组件DidMount（如果是类组件）或useEffect方法（如果功能组件）中获取该值。

例

function MyComp() {

  const [myLocalStorageData, setMyLocalStorageData] = useState({})

  useEffect(()=> {

    //logic for getting a value from local storage stored under the key 'key'

    const data = localStorage.getItem('key')

    setMyLocalStorageData(JSON.parse(data))

  },[])

  ....

}

文档：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage