Question

我在用React渲染REST API响应时遇到问题。我能够在控制台中看到响应及其在其中的工作。但是，当我尝试在UI中呈现它时，出现了一个错误TypeError: Cannot read property 'State' of undefined。我已经摘录了所需的代码，就在这里。

  render() {
    const { getdetails } = this.state;
    const itemID = 'ITAINUAT69-8982';

    if (!getdetails ) {
      return <div>Loading Please Wait...</div>;
    }
    else {
      return (
     <div>
               {getdetails.itemID.State} // when trying to render directly, not working
 // also not working in loop.
                  {/* 
                  <ul>  
                   {getdetails.itemID.map((detail, index) => (
                      <li key={detail.index}>
                         {detail.State}
                      </li>
                    ))}
                    </ul> */}
            </div>
          );
        }
      }
    }
    export default Items;

这是Postman＆console中的响应示例。

   {
    "ITAINUAT69-8982": {
        "State": "Not Assigned",
        "SubmitDate": "2020-09-11T04:39:51Z",
}

谢谢大家。

Answer 1

那是因为在第一个渲染中getdetails为空。您可以使用可选的链运算符来解决此问题：

Object.keys(getdetails)?.[0]?.State

或

getdetails?.[itemID]?.State

无法在反应中呈现REST API响应

1 个答案: