Question

如何根据React中的一系列对象获得基于键的值

2021-07-01

131

javascript arrays reactjs javascript-objects

我有一个状态

    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” 。

如何显示。请帮忙

Answer 1

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

您可以使用可选链接来检查返回：

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