在使用上下文调用 Api 后将数组传递给其他组件

Posted 2023-04-14

【中文标题】在使用上下文调用 Api 后将数组传递给其他组件

【英文标题】：Passing array to other components after calling Api in react using context

【发布时间】：2020-04-27 22:12:08

【问题描述】：

我正在尝试将一组数据作为道具（使用上下文）传递给另一个组件 Carousello.js

但我无法检索 Home.js 组件上的数据。

这是我的 HomeContext.js 组件：

我使用上下文调用 API，然后将数据传递给 Home.js

import React,  useState, createContext  from 'react';
import axios from 'axios'

export const HomeContext = createContext();

export const HomeProvider = (props) => 
    let array = []
    axios.get(`/wordpress/wp-json/wp/v2/pages/15`)
        .then(function (res) 
            let slider = res.data.acf.slider
            array.push(slider)
        )
    console.log(typeof (array))
    let ar = array.flat()
    console.log(ar)
    return (
        <HomeContext.Provider value=[array]>
            props.children
        </HomeContext.Provider>
    )
 

这是我的 Carosello.js 组件，我尝试在其中检索数据并使用 jsx 呈现它：

import React,  Component, useContext  from 'react'
import sfondo from './sfondo-gray.jpg'
import  HomeProvider, HomeContext  from './HomeContext';

const Carosello = () => 
    const [acf] = useContext(HomeContext)
    console.log(acf)
    return (
        <div id="myCarousel" className="carousel slide" data-ride="carousel" >
           <h1> acf.title </h1>
        </div >
    )


export default Carosello

【问题讨论】：

react rerender only on update of state, props, 而不仅仅是改变变量的值，所以你的改变不会被渲染，因为 let array = [] 只是一个局部变量，使用 state 就可以完成这项工作跨度>

【参考方案1】：

您可能还需要将您的 axios 调用包装在一个函数中，以便在 useEffect 中使用。有关这方面的更多详细信息，请查看：A complete guide to useEffect 和 fetchind data with useEffect。基本上，使用[]（依赖项的空列表）来触发一次性操作并不总是像您对类组件的componentDidMount 所期望的那样工作。

export const HomeProvider = (props) => 
  const [array, setArray] = useState([]);

  useEffect(()=> 
    function fetchData() 
      axios.get(`/wordpress/wp-json/wp/v2/pages/15`)
      .then(function (res) 
        let slider = res.data.acf.slider
        setArray([...slider.flat()])
        )
      

      fetchData();
  , [])

  return (
      <HomeContext.Provider value=[array]>
          <>props.children</>
      </HomeContext.Provider>
  )

【参考方案2】：

import React,  useState, createContext  from 'react';
import axios from 'axios'

export const HomeContext = createContext();

export const HomeProvider = (children) => 
    // array type
    const [items, setItems] = useState([])
    axios.get(`/wordpress/wp-json/wp/v2/pages/15`)
        .then(function (res) 
            let slider = res.data.acf.slider
            setItems([...slider.flat()])
        )

    return (
        <HomeContext.Provider value=
            array:items
        >
            children
        </HomeContext.Provider>
    )
 

const Carosello = () => 

    // object destructuring
    const array = useContext(HomeContext)

    return (
        <div id="myCarousel" className="carousel slide" data-ride="carousel" >
            /* if is array, try to map or [key] */
           <h1> array[0].title </h1>
        </div >
    )


export default Carosello
`

【参考方案3】：

function HomeProvider()
   const [array, setArray] = React.useState([]);
   React.useEffect(()=> 
     axios.get(`/wordpress/wp-json/wp/v2/pages/15`)
        .then(function (res) 
            let slider = res.data.acf.slider
            setArray((arr)=> [...arr, slider])
        )
   , [])
   return (
        <HomeContext.Provider value=[array]>
            props.children
        </HomeContext.Provider>
    )

【讨论】：

对象作为反应子错误无效

是的，你应该写<>props.children</> Doc：en.reactjs.org/docs/fragments.html