javascript - 无法读取未定义的属性 'map'

Question

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

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

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>
                );
      }

Answer 1

通过在顶层编写 arr = todos[0]，您将创建一个 global 变量，该变量在获取数据之前一直是 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>
          ))}