Question

我第一次尝试 React 查询，然后在我的 React 应用程序启动时得到了这个。

虽然我添加了 QueryClientProvider 我仍然面临树的顶部：Error: No QueryClient set, use QueryClientProvider to set one

index.js

ReactDOM.render(
    <QueryClientProvider queryClient={queryClient}>
        <App />
    </QueryClientProvider>
  ,
  document.getElementById('root')

App.js

function App() {
  return (
      <div className="App">
       <Forms/>
      </div>
  );
}

Form.js

function Forms() {
    const[createTodo,todoMutation]= useMutation((event) => {
        axios.post('/todos', event.target.elements.todo.value);
    })

    return (

        <div>
            <form onSubmit={createTodo}>
                <label htmlFor="todo">todo-item:</label>
                <input id="todo" name="Add todo"/>
                <button>Submit</button>
            </form>
        </div>

    )
}

Package.json

    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "3.12.1",
    "react-scripts": "4.0.0"

Answer 1

道具名称应为 client 而不是 queryClient

 import { QueryClient, QueryClientProvider } from 'react-query' 

 const queryClient = new QueryClient()

 function App() {

   return <QueryClientProvider client={queryClient}>...</QueryClientProvider>

 }

Answer 2

将版本从 V3 降级到 V2 修复了该问题。

错误：未设置 QueryClient，使用 QueryClientProvider 设置一个

2 个答案: