为什么不显示存储的对象？

Question

我将在 bmi 计算项目中输入的值作为对象保存在 localStorage^ 中。我在尝试查看它时遇到了问题。我有一个错误，即“无法读取 null 的属性（读取 'DaTe'）”。我能做什么？

这是我声明的值：

function storeData() {
        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]) 

Calculations.js: 
function Calculations() { 
    return (
        <div className="calc-page" >
            <h2>CALCULATIONS</h2>
            <table id="records">
                <tbody>
                    <tr>
                    <th>Date</th>
                    <th>Name</th>
                    <th>BMI</th>
                    </tr>
                    {(localStorage.getItem("formData")) && JSON.parse(localStorage.getItem("formData")).map(data=>{
                    <tr>
                    <td>{data.DaTe}</td>
                    <td>{data.Name}</td>
                    <td>{data.resultBmi}</td>
                    </tr>
                    })}
                </tbody>
            </table>
            <button className="btn-clear">Clear</button>
        </div>
    );
} 

Answer 1

您应该使用map() 方法来呈现数据，因为forEach 返回undefined 而map 返回一个新数组：

Working example