Axios不从API下载用户

Question

我想用axios从API下载用户，但我遇到了一个错误，当我从UsersProvider中删除｛｝时，它不会为我下载任何内容。如何修复或更改？

错误

主文件：

import {UsersProvider} from "../../contexts/Users";
const Main:React.FC= () => {
const [showUser, setShowUser] = useState("");
return (
<div>
<div>
<Header/>
</div>
<UsersProvider>
<UsersList/>
<Debounce onChange={setShowUser}/>
</UsersProvider>
</div>
)
}
export default Main

文件用户：

import React, {useState, useEffect} from 'react';
import axios from 'axios';
type Users = Person[];
type Person = {
name:string;
username:string;
}
export const UsersContext = React.createContext<Users>([]);
const UsersProvider:React.FC= ({children}) => {
const [users, setUsers] = useState<Person[]>([]); 
useEffect(() => {
axios
.get(`https://jsonplaceholder.typicode.com/users`)
.then((response) =>{
setUsers(response.data);
})
.catch((error) => {
console.log(error);
});
},[]);

return (
<UsersContext.Provider value={users}>
{children}
</UsersContext.Provider>

)
}
export default UsersProvider

Answer 1

import { UsersProvider } from "../../contexts/Users";

以上导入称为命名导入。但是，在您的代码中，您已经将UsersProvider导出为../../contexts/Users文件中的默认导出。因此，你会犯这个错误。

只有当您在../../contexts/Users文件中按如下方式导出了UsersProvider时，这才会起作用。

export const UsersProvider: React.FC= ({children}) => {
// rest of the code...

但是，如果你不想有命名的导出，那么你可以这样写你的导入：

import UsersProvider from "../../contexts/Users";

Answer 2

我刚刚这么做了，只是我仍然不知道为什么它没有从axios下载我的用户列表。几个月前一切都正常，但现在根本无法下载

Answer 3

import React from 'react';
import './style.css';
type Props = {
filteredUsers?:Array<Person>;
}
type Person = {
name:string;
username:string;
}
const UsersList: React.FC<Props> = ({filteredUsers = []}) =>{
return(
<div className="ListHead"> 
<ol className="list">
{filteredUsers.map((Person) => (
<li key={Person.name}>
<span>{Person.name}</span>
@{Person.username}
</li>
))}
</ol>
</div>
)}
export default UsersList

Answer 4

UsersProvider是默认导出。

你需要做

import UsersProvider from "../../contexts/Users";

由于我们现在使用上下文，我们可以将UsersList中的用户作为使用

import React, { useContext } from 'react';
import UsersContext from 'your path'

const UsersList: React.FC = () => {
const users = useContext(UsersContext);
return(
<div className="ListHead"> 
<ol className="list">
{users.map((Person) => (
<li key={Person.name}>
<span>{Person.name}</span>
@{Person.username}
</li>
))}
</ol>
</div>
)}
export default UsersList 

Answer 5

我有这个，但也许这里一定有什么变化？

import React from 'react';
import {DebounceInput} from 'react-debounce-input';
import './style.css';
type Props ={
onChange:Function;
}
const Debounce:React.FC<Props> = ({onChange}) => {
return(
<DebounceInput
onChange={(e) => onChange(e.target.value)}             
debounceTimeout={500}                 
className="SearchInput"                  
placeholder="Search by user name..."                  
/>      
)
}
export default Debounce