Question

在 React 中显示数组数据。没有输出

2022-02-20

291

javascript arrays reactjs user-interface react-hooks

当我在控制台中打印 console.log(response.data) 时，会出现以下输出。

我创建了一个钩子 const [result,setResult] = useState([]);

然后将 API 的输出设置为

setResult(response.data);

当我编写下面的代码时，它只是打印 “数据是” 。它没有打印 result 的输出>

              <h1>
                  Data is
               {
                   result.map((res:any)=>{
                       {res.id};
                   })
                }    

              </h1>

我犯了什么错误？

Answer 1

代码的整体逻辑没问题。您正确地使用了 useState Hook。传递给状态的数据是一个数组，可以很好地与 map() 方法配合使用。我看到的唯一问题是您的 map() 方法没有得到很好的实现。

请尝试以下方法：

<h1>
  Data is
  {
   result.map((res:any)=>{
      return <p>{res.id}</p>
   })
  }    
</h1>

map() 方法始终会返回某些内容。如果是一行代码，则无需键入 return。

<h1>
  Data is
  {
   result.map((res:any) => res.id )
  }    
</h1>

要打印对象的多个属性：

<h1>
  Data is
  {
   result.map((res:any) => {
      return (
        <div key={res.id}>
           <p>{res.id}</p>
           <p>{res.name}</p>
           <p>{res.createdAt}</p>
        </div>
      )
   })
  }    
</h1>