在 React 中使用 Provider 传递对象数组

Posted 2023-02-14

【中文标题】在 React 中使用 Provider 传递对象数组

【英文标题】：Passing an array of Object using Provider in React

【发布时间】：2022-01-23 17:19:38

【问题描述】：

我已从 https://api.github.com/users 获取以下 API，并尝试使用 React 通过提供程序共享数组。我怎样才能做到这一点？

export const dataArray = createContext();

function ApiData() 

    // Assign the Array and set it an empty array
    const [users, setUsers] = useState([]);
    const [loadDataState, setloadDataState] = useState(false) // Initates a loadData variable to set initial state as false

    const baseUrl = 'https://api.github.com/users'

    useEffect( () => 
        axios.get(baseUrl)
            .then((Response) => 
            
                console.log('========== Github Api  ==========')
                setUsers(Response.data)
                console.log('Json Array', Response.data)
                console.log('User Array', users);
                console.log('=================================')
                setloadDataState(true);
            )
            .catch(error => console.error(error))
    , []);
    
    return (
        <>
            <dataArray.Provider>
                
            </dataArray.Provider>
        </>
    )


export default ApiData  

【参考方案1】：

如果您想使用状态提供程序，我建议您使用 Redux（如果您正在处理具有复杂状态的项目），如果不是，您可以使用 Contexte API 进行简单的逻辑。

如果您只想将 Array 传递给组件，您可以在 props 中传递它，如下所示：

return (
<YourComponent users=users/>
)

在 YourComponent.js 中

function YourComponent(props) 
return (
<p>props.users</p>
)

export default YourComponent;

【参考方案2】：

当你使用反应上下文时，Provider 可以有一个value 属性，它将接收将提供给所有使用上下文的子组件的数据。

<MyContext.Provider value=/* some value */>

如果value props 没有提供，那么将提供给子组件的值就是你调用React.createContext 时提供的值

const MyContext = React.createContext(defaultValue);

【讨论】：

使用 Provider 和仅将数组作为 prop 传递有什么区别？

使用 Provider 作为上下文的一部分，您不必在需要时将每次数据作为道具传递给每个子组件，您可以直接使用上下文，您将可以访问提供的数据在MyContext.Provider 包装器上。

谢谢你的解释，这样不是效率低吗？也许代码更简洁，但只传递将要使用的变量更有意义..