Question

我遇到了无法读取地图属性的错误，我试图通过使用 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>
                );
      }

Answer 1

通过在顶层写入 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>
          ))}

Answer 2

添加一个条件，使其在您的 arr 不是 undefined 时运行：

{arr !== "undefined" && arr.map(arr => (

<块引用>

React 评估我们的 return 语句，当它遇到 arr.map(...) 将其实际运行的行 undefined.map(...) 这显然是一个 JavaScript 中的错误。

阅读更多here

Answer 3

使用以下编程结构来确保 arr 在其中具有值：

{arr && arr.map(arr => (
  // ...
))}

useEffect 挂钩异步工作，因此在第一次运行时 arr 将是 undefined：

arr = todos[0]; // [][0] === undefined

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

3 个答案: