为什么React中使用Object.entries加forEach遍历localStorage时内容无法渲染

问题根因 #

1. 渲染失败是完全的预期行为，核心原因是你使用了forEach方法做遍历：forEach本身没有返回值，仅会遍历执行回调逻辑，你在回调内返回的JSX元素不会被外层模板捕获，最终渲染内容为undefined，自然没有内容展示。
2. 你需要同时获取key和value的场景，直接用Object.entries()搭配map即可，map会返回新的JSX元素数组，符合React的列表渲染要求。

直接修复方案 #

把渲染逻辑里的forEach替换为map即可：

{Object.entries(storage).map(([key, value]) => {
  return (
    <Create key={key}>
      <textarea value={value} readOnly />
      <button onClick={() => deleteNote(key)} >Delete Note!</button>
      <button onClick={() => handleClear()} >Edit Note!</button>
    </Create>
  )
})}

现有实现的其他问题和优化方案 #

1. 直接存储localStorage引用的问题
   你现在将原生localStorage对象直接存在state中是不合理的：localStorage是全局引用对象，你操作完本地存储后调用setStorage(localStorage)传入的还是同一个引用，React做状态浅比较时会认为状态未发生变化，大概率不会触发重渲染，当前你能触发更新属于巧合。
   修正方案：每次存储时将localStorage转为普通对象，生成新的引用：

// 初始化时
const [storage, setStorage] = useState({...localStorage});

// createNote、deleteNote更新时
setStorage({...localStorage});

// 清空时
function handleClear(){
  localStorage.clear();
  setStorage({});
}

2. 冗余的useEffect优化
   你当前用useEffect监听isTitleAvailable更新提示文本的逻辑完全可以合并到verifyTitle里，不需要额外的副作用监听，减少不必要的重渲染：

function verifyTitle(event) {
  const inputTitle = event.target.value;
  if (inputTitle in localStorage) {
    setIsTitleAvailable(false);
    setErrorTitle('Try another title.');
  } else {
    setIsTitleAvailable(true);
    setErrorTitle('Available title.');
  }
}

移除对应的useEffect即可。
3. 避免直接操作DOM
你现在用document.getElementById获取输入框值的写法不符合React的最佳实践，建议改为受控组件，用state存储标题和笔记内容的输入值，不要直接操作DOM节点。

内容的提问来源于stack exchange，提问作者Sasquatch