分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用带有 useEffect 钩子的 react fetch() 并映射获取的数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用带有 useEffect 钩子的 react fetch() 并映射获取的数据？

开发过程中遇到如何使用带有 useEffect 钩子的 react fetch() 并映射获取的数据的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使用带有 useEffect 钩子的 react fetch() 并映射获取的数据的解决方法建议，希望对你解决如何使用带有 useEffect 钩子的 react fetch() 并映射获取的数据有所启发或帮助；

尝试使用 useEffect 钩子在前端获取 API 数据，

我可以控制台记录数据但无法以某种方式映射它

新的反应

console output

function SlugBook() {
    // let {slug} = useParams(),const [state,setState] = useState([])
    
    useEffect(() => {
        fetch("http://127.0.0.1:8000/app/revIEws/",{CSRF_TOKEN....}
            )
            .then(response => response.Json()) 
            .then(data => console.log(data)) -->works fine
            .then(data => setState(data)); --> not sure
        
           })

         return (
               <p>
            {state.map( d => (<li>{D}</li>))} ---> error code ()
               </p>
            )
            }
 export default SlugBook

解决方法

两个问题：

您需要像这样在第二个 then 中设置您的状态：

    useEffect(() => {
        fetch("http://127.0.0.1:8000/app/reviews/",{
            credentials: 'include',method: 'GET',mode: 'same-origin',headers: {
              'Accept': 'application/json','Content-Type': 'application/json','X-CSRFToken': CSRF_TOKEN
            }})
            .then(response => response.json()) 
            .then(data => setState(data))
    })

您需要在 useRef 中使用依赖项数组，否则您将获得无限的重新渲染。所以把它改成：

    useEffect(() => {
        fetch("http://127.0.0.1:8000/app/reviews/",'X-CSRFToken': CSRF_TOKEN
            }})
            .then(response => response.json()) 
            .then(data => console.log(data)) -->works fine
            .then(data => setState(data)); --> not sure

        
    },[])

将依赖数组设置为空数组 [] 将确保您的 useEffect 在第一次渲染时只运行一次 fetch。