使用React中的Provider传递Object的数组

Question

我从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  

Answer 1

使用react上下文时，Provider可以具有value属性，该属性将接收将提供给使用该上下文的所有子组件的数据。

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

如果value道具没有提供，将提供给子组件的值就是调用React.createContext时提供的值

const MyContext = React.createContext(defaultValue);

Answer 2

如果你想使用状态提供程序，我建议你使用Redux(如果你正在处理一个具有复杂状态的项目(，否则你可以使用Contexte API进行简单的逻辑。

如果你只想把数组传给一个组件，你可以把它传给道具，比如：

return (
<YourComponent users={users}/>
)

在YourComponent.js 中

function YourComponent(props) {
return (
<p>props.users</p>
)
}
export default YourComponent;