react js filter() 方法和数据

Question

我在react js中有一个叫做allDatas的状态，其中有对象形式的照片和文本等数据，我从params中获取页面ID，现在，使用filter()方法，我要求ID与ID参数匹配的对象等于获取其数据并将其保存在另一种状态，但它没有给我数据并给我一个空数组，问题出在哪里？谢谢你

我的代码：

  let params  = useParams()
  

  const [allDatas, setAllDatas] = useState(AllCoursesData)
  
  const [buyData, setBuyData] = useState([])
  
  useEffect(() => {


    const filterData = allDatas.filter(data => data.id === params)
    
    if (filterData.length > 0) {
      setBuyData(filterData)
    }
    console.log(filterData);
    
    
  }, [params])

Answer 1

您会从

filter()

方法返回一个空数组，因为您将

data.id

与

params

而不是

params.id

进行匹配。

useParams()

钩子返回一个对象。您应该按如下方式重构代码：

let params = useParams()

const [allDatas, setAllDatas] = useState(AllCoursesData)

const [buyData, setBuyData] = useState([]);

useEffect(() => {
   const filterData = allDatas.filter(data => data.id === params.id);

   if (filterData.length > 0) {
      setBuyData(filterData)
    }


}, [params.id])

这应该可以解决您的问题。