react请求数据渲染报错

最新推荐文章于 2023-05-06 14:46:16 发布

kyyius

最新推荐文章于 2023-05-06 14:46:16 发布

阅读量865

点赞数 1

文章标签： react js

本文链接：https://blog.csdn.net/kyyius/article/details/115966974

版权

这篇博客探讨了在React应用中遇到的异步数据处理问题，导致map方法报错的情况。通过使用Hooks（useState和useEffect）来确保数据在渲染到页面之前已经被获取。提出了两种解决方案：一是条件渲染，只有当数据加载完成后才执行map操作；二是初始化数据结构，确保即使在数据未加载时，组件也能避免报错。这两个方案都有效地防止了因数据未准备好而引发的错误。

摘要由CSDN通过智能技术生成

情景:
请求数据，然后map循环，报错，说没有map方法

原因:
把map部分注释掉后，查看返回的数据。数据没有问题，说明是异步的问题。

链接: JavaScript异步理解.

思路:
我们没有确确实实拿到数据，就渲染，报错也正常
那么我们就要保证数据拿到手了，渲染到页面上。

HOOKS 例子

// 方案一
// 请求的数据结构{result: Array(20)}
// 没有map方法，那我们就让它有
// 初始化数据{a: 11,result: []}, a只是演示如何把它保留下来
// a相当于原始数据中的flag之类的东西
import React, {useState, useEffect} from 'react'
function App(props){
	const [list, setList] = useState({a: 11,result: []});
	useEffect(()=>{
	    //useEffect 的第一个回调最好不用修饰成async，不然会有警告，
	    // 在内部重新定义一个async
		const f = async ()=>{
			const {data} = await axios('http://xxx')
			// 如果想把a保留下来，用下面这种形式
			// pre 是原来的数据,重复字段会进行合并
			setList(pre=>({...pre, ...data})) //{a: 11, result: Array(20)}
			// console.log(data) //{result: Array(20)}
			// setList(data) //{result: Array(20)}
		}
		f()
		return ()=>{
			setList(null)
		}
	}, [])
return (
		<div>
		  Hello
		{
			// 这里如果还没有拿到数据，那么相当于空数据
			// 因为初始化的时候的result是[],有map方法
			// 拿到数据后就会正常渲染出来
			list.result.map(i=>{
				return <div key={i.id}>{i.title}</div>
			})
		}
		</div>
	)
}

export default App;

// 方案二
// 条件渲染
import React, {useState, useEffect} from 'react'
function App(props){
	const [list, setList] = useState({});
	useEffect(()=>{
	    //useEffect 的第一个回调最好不用修饰成async，不然会有警告，
	    // 在内部重新定义一个async
		const f = async ()=>{
			const {data} = await axios('http://xxx')
			// 如果想把a保留下来，用下面这种形式
			// pre 是原来的数据,重复字段会进行合并
			setList(pre=>({...pre, ...data})) //{a: 11, result: Array(20)}
			// console.log(data) //{result: Array(20)}
			// setList(data) //{result: Array(20)}
		}
		f()
		return ()=>{
			setList(null)
		}
	}, [])
	// 初始化的时候是空值，如果没有拿到数据，到list.result.map时会报错
	if(list.result){
	return (
		<div>
		  Hello
		{
			list.result.map(i=>{
				return <div key={i.id}>{i.title}</div>
			})
		}
		</div>
	)
  }
 // 拿到数据前显示加载中
  return (
	<h1>loading</h1>
  )
}

export default App;