如何根据键从 React 中的对象数组中获取值

问题描述

我有一个状态

    const [analysisData,setAnalysisData] = useState(false);

我正在函数中设置此状态的数据，当我控制台 console.log(analysisData) 时，我得到的输出为

 {ID:1,ANALYSIS_NAME : "name1",custodians:"[{\"ID\": 1,\"NAME\": \"abc\"},{\"ID\": 2,\"NAME\": \"xyz\"},{\"ID\": 3,\"NAME\": \"pqr\"}]"
    
    };

当我尝试在 HTML 中显示如下时，出现错误

    const AnalysisList = () => {
    return(<div>
    <Panel>
    {JSON.parse(analysisData.custodians).map((childData) => {
        return (
            <div>
                {console.log(childData.NAME)}
            </div>
        )}
    )}
    

    <Panel>
    </div>)
    }

    export default AnalysisList

我试图在上述代码的 div 内显示 "Name"。

如何显示。请帮忙

解决方法

因为 analysisData 的初始值为 false。所以 JSON.parse(analysisData.custodians) 是返回 undefined 并且地图将不起作用。

您可以选择链接来检查回报：

{JSON.parse(analysisData.custodians)?.map((childData) => {
    return (
        <div>
            {console.log(childData.NAME)}
        </div>
    )}
)}