在React中，.map无法在对象数组上正常工作。

9 浏览
0 Comments

在React中，.map无法在对象数组上正常工作。

我有以下代码：

const displayData = (data) => {
    console.log(data);// 这显示了一个对象数组
    if (!data.length) return null;
    return data.map((movie, index)=>{
            
{movie.Title}

            {movie.Year}
    })
}
return (
        

             setSearchTerm(event.target.value)}
            />
            
        

            {displayData(data)}
);

}

但无法使data.map正常工作。

这是在控制台中显示的注释控制台.log：

enter image description here

0

2 答案

0 Comments

在React中，当我们尝试在对象数组上使用.map()方法时，可能会遇到.map not working on array of objects in react这个问题。这个问题的原因是在.map()的lambda函数中没有返回任何内容。

为了解决这个问题，我们需要在.map()的回调函数中返回JSX。具体做法如下：

return data.map((movie, index) => {
  return 

           
{movie.Title}

           
{movie.Year}

         
;
});

在上述代码中，我们将每个对象数组中的元素映射为一个包含电影标题和年份的div元素，并使用index作为每个div元素的key。这样，我们就能够正确地在React中使用.map()方法来遍历对象数组了。

0
0 Comments

问题原因：代码中的.map函数没有正确地返回任何内容。

解决方法：在.map函数中添加正确的返回语句。

以下是一个示例代码，展示了问题的原因和解决方法：

import React from 'react';
const App = () => {
  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];
  // 错误示例：没有返回任何内容
  const renderData = () => {
    data.map(item => (
      

        {item.name}
      

    ));
  };
  // 正确示例：在.map函数中添加返回语句
  const renderData = () => {
    return data.map(item => (
      

        {item.name}
      

    ));
  };
  return (
    

      {renderData()}
    

  );
};
export default App;

在上述示例中，我们有一个名为data的数组，其中包含了一些对象。我们尝试使用.map函数将这些对象渲染为React组件。在错误示例中，我们没有正确地返回.map函数的结果，导致渲染不起作用。然而，在正确示例中，我们在.map函数中添加了返回语句，这样就能够正确地渲染并显示数组中的对象。

因此，如果在React中使用.map函数遍历对象数组时遇到问题，请确保在.map函数中正确地返回结果。

0