我從以下 API 中獲取https://api.github.com/users并嘗試使用 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
uj5u.com熱心網友回復：
當您使用 react 背景關系Provider可以有一個value屬性，該屬性將接收將提供給所有使用背景關系的子組件的資料。
<MyContext.Provider value={/* some value */}>
如果value道具沒有提供將提供給子組件的值是您呼叫時提供的值React.createContext
const MyContext = React.createContext(defaultValue);
uj5u.com熱心網友回復：
如果您想使用狀態提供程式，我建議您使用Redux（如果您正在處理具有復雜狀態的專案），否則您可以使用Contexte API來實作簡單的邏輯。
如果你只想將 Array 傳遞給一個組件，你可以在 props 中傳遞它，如下所示：
return (
<YourComponent users={users}/>
)
在 YourComponent.js 中
function YourComponent(props) {
return (
<p>props.users</p>
)
}
export default YourComponent;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390696.html