localStorage存储的对象无法显示，报Cannot read properties of null错误如何解决

核心问题点 #

• Calculations.js中map回调使用大括号包裹但未写return语句，没有返回要渲染的DOM节点
• 未对本地存储读取的数据做合法性校验，一旦数组中混入null/无效对象，遍历读取属性就会触发报错
• React列表渲染未加唯一key属性，可能引发渲染异常
• 存储逻辑未做参数非空校验，可能将无效数据存入本地存储

修复后的代码 #

1. 计算页面逻辑修改 #

function Calculations() { 
    // 统一读取并处理存储数据，默认值设为空数组
    const rawData = JSON.parse(localStorage.getItem("formData") || "[]")
    // 过滤所有非对象类型的无效项，避免读取属性时报错
    const validData = rawData.filter(item => typeof item === 'object' && item !== null)

    return (
        <div className="calc-page" >
            <h2>CALCULATIONS</h2>
            <table id="records">
                <tbody>
                    <tr>
                    <th>Date</th>
                    <th>Name</th>
                    <th>BMI</th>
                    </tr>
                    {validData.map((data, index)=>{
                        // 新增return返回DOM节点，添加列表key属性
                        return (
                            <tr key={index}>
                                <td>{data.DaTe}</td>
                                <td>{data.Name}</td>
                                <td>{data.resultBmi}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
            <button className="btn-clear">Clear</button>
        </div>
    );
} 

2. 存储逻辑优化（可选，避免无效数据写入） #

function storeData() {
    // 新增必填参数非空校验，避免存无效数据
    if(!bmiResult || !values?.name) return
    var today = new Date();  
    var date = (today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();
    let formData = JSON.parse(localStorage.getItem('formData')) || [];
    formData.push({
        DaTe : date,
        resultBmi: bmiResult,
        Name: values.name,
    });
    localStorage.setItem('formData', JSON.stringify(formData));
}
useEffect(()=>{
    storeData();
},[bmiResult]) 

其他排查方案 #

如果修改后仍有报错，可以打开浏览器开发者工具的Application面板，找到LocalStorage下的formData字段，手动删除后重新测试即可。

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