时间戳

首页 > 解决方案 > 无法读取未定义的属性“地图”

javascript - 无法读取未定义的属性“地图”

问题描述

我有一个无法读取地图属性的错误，我试图通过使用 RESTful API 从数据库中获取数据并将其存储到一个数组中来在我的页面上显示一个目录。我第一次打开网站时一切正常，它显示表格没有问题，但是当我刷新时它给出了错误。

这是我获取数据并使用地图将其显示在表格中的函数：

const ListTodos = ()=>{
    const [todos,setToods]=useState([]);
   
        const getTodos = async ()=>
        {
            try{
                const res = await fetch("http://localhost:3080/get")
                
                console.log(res)
                   const jsondata = await res.json();
                   setToods(jsondata);
            }catch(err){
              
                console.error(err.message);
            }
        }


        useEffect(() => {
            getTodos();
          }, []);
          
          arr = todos[0];

 
      
      return (
          <Fragment>
      <table class="table mt-5 text-center">
        <thead>
        <tr>
            <th>ID_Event</th>
            <th>Name_Event</th>
            <th>Date</th>
            <th>Address</th>
            <th>Duration</th>
            <th>Description</th>
            <th>Delete</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        
        {arr.map(arr => (
            <tr>
              <td>{arr.ID_Event}</td>
              <td>{arr.Name_Event}</td>
              <td>{arr.Date}</td>
              <td>{arr.Address}</td>
              <td>{arr.Duration}</td>
              <td>{arr.description}</td>
              <td>
              <button className="btn btn-danger" onClick={() => deleteevnet(arr.ID_Event)}>Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Fragment>
                );
      }

标签： javascript

解决方案

arr = todos[0]通过在顶层编写，您正在创建一个全局变量，undefined直到获取数据（空数组的第一个元素）。

您应该理想地声明它，因为const它是功能组件的本地，并在它与以下内容时处理这种情况undefined：

{arr && arr.map(arr => (
            <tr>
              <td>{arr.ID_Event}</td>
              <td>{arr.Name_Event}</td>
              <td>{arr.Date}</td>
              <td>{arr.Address}</td>
              <td>{arr.Duration}</td>
              <td>{arr.description}</td>
              <td>
              <button className="btn btn-danger" onClick={() => deleteevnet(arr.ID_Event)}>Delete</button>
              </td>
            </tr>
          ))}

推荐阅读