反应useEffect fetch - TypeError？

Posted 2023-02-27

【中文标题】反应useEffect fetch - TypeError？

【英文标题】：react useEffect fetch - TypeError?

【发布时间】：2021-09-09 16:06:16

【问题描述】：

这段代码有什么问题.. 在控制台上一切正常，但在我尝试使用setData(result) 将数据提取到 div 之后 我有很大的错误：

×
Unhandled Rejection (TypeError): setData is not a function
(anonymous function)
C:/blog/src/components/BlogPosts.js:19
  16 |        .then((res) => res.json())
  17 |        .then((result) => 
  18 |          console.log(result)
> 19 |          setData(result)
     | ^  20 |        )
  21 |    
  22 | 

import  useState, useEffect  from 'react'
import styles from './BlogPosts.module.css'


const BlogPosts = () => 
  const  data, setData  = useState([])

  useEffect(() => 
    const fetchData = async () => 
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then((res) => res.json())
        .then((result) => 
          console.log(result)
          setData(result)
        )
    

    fetchData()
  , [])

  return (
    <section className=styles.posts>
      /* <div>
        data.map((x) => 
          return <div key=x.id>x.title</div>
        )
      </div> */
    </section>
  )


export default BlogPosts

【参考方案1】：

 const fetchData = async () => 
      let res = null;
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then((res) => res.json())
        .then((result) => 
          console.log(result)
          res = result;
        )
      return await res;
    
useEffect(async() => 
   const data = await fetchData();
   setData(data);
  , [])

【讨论】：

您能否使用上述解决方案与 const [ data, setData ] = useState([]) 状态解构。

【参考方案2】：

问题出在这里：

  const  data, setData  = useState()

useState() 钩子返回一个数组，所以你应该解构一个数组

  const [ data, setData ] = useState()

P.S，将状态初始化为空数组并没有什么坏处（与没有/未定义相比，它现在是）

const [ data, setData ] = useState([])

您这样做是因为在您注释掉的代码中，您尝试使用 map() 方法，这是一种数组方法。

【讨论】：

你说得对，我不得不删除它 - 但即使使用 [] 代码也不起作用

我已经做了一个工作代码here的演示。检查你所做的是否符合它。