获取请确保组件在打包后也被封装在提供商中

Question

我正在使用nextjs和react redux。

我得到这个错误:

错误:无法找到react-redux上下文值;请确保组件包裹在<Provider>中。

我已经尝试了所有方法并将其包装在提供程序中，但错误仍然存在。

import { useRouter } from 'next/router';
import { useState } from 'react'
import axios from 'axios'
import { useDispatch } from "react-redux";
import { authActions } from '../store';
import { Provider } from 'react-redux'
import store from '../store';
export default function Signup(props) {
const router = useRouter();
const dispatch = useDispatch();
const [inputs, setInputs] = useState({
name: "", email: "", password: ""
});
const handleChange = (e) => {
setInputs((prevState) => ({
...prevState,
[e.target.name]: e.target.value
}))
}
const sendRequest = async (type = "signup") => {
const res = await axios.post(`https://blog-app-23.onrender.com/api/user/${type}`, {
name: inputs.name,
email: inputs.email,
password: inputs.password
}).catch((err) => console.log(err));
const data = await res.data;
return data;
}
const handleSubmit = (e) => {
e.preventDefault()
console.log(inputs);
sendRequest("signup")
.then((data) => localStorage.setItem("userId", data.user._id))
.then(() => dispatch(authActions.login()))
.then(() => router.push("/courses"))
}
return (
<Provider store={store}>
<section>
<div className='h-[100vh] flex items-center'>
<ReactNebula className="nebula" config={{ astres: smallSolarSystem }} />
<div className='w-1/2 h-[30rem]'><ComputersCanvas /></div>
<div className='w-1/2 h-[10rem] stu flex items-center'>
<div className='h-[30rem] w-[29rem] rounded-3xl bg-white stu flex mx-auto p-6 flex-col'>
<h1 className='text-2xl font-semibold'>Sign Up</h1>
<div className='mt-5 flex flex-col'>
<form onSubmit={handleSubmit}>
<input name="name" onChange={handleChange} value={inputs.name} placeholder='name' className="py-2 my-3 px-5 ml-2 rounded-md bg-gray-200 text-gray-700 flex-grow mr-4" />
<input name="email" onChange={handleChange} value={inputs.email} type={'email'} placeholder='email' className="py-2 my-3 px-5 ml-2 rounded-md bg-gray-200 text-gray-700 flex-grow mr-4" />
<input name="password" onChange={handleChange} value={inputs.password} type={'password'} placeholder='password' className="py-2 my-3 px-5 ml-2 rounded-md bg-gray-200 text-gray-700 flex-grow mr-4" />
<button type={"submit"} className=' mt-7 started text-white py-3 px-5 text-md rounded-2xl bg-red-500' >Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</section>
</Provider>
)
}

我尝试了所有方法，但代码都不能运行。

Answer 1

您在<Provider>之外使用useDispatch()，因为<Provider>目前包含在<Signup>的标记中。

将Signup的内容移动到单独的组件中(下面命名为WithProvider)¹:

// imports...
export default function Signup(props) {
return (
<Provider store="store">
<WithProvider {...props} />
</Provider>
)
}
function WithProvider(props) {
// you can `useDispatch()` here because it's inside `<Provider>`
}

---

<一口>1-你可以将它命名为WithStore或任何你想要的;它是一个局部函数。默认导出仍然是<Signup>。

Answer 2

Signup组件不能访问任何redux上下文，因为它是呈现redux上下文的组件。将Provider提升到reactretree中比任何需要访问其提供的上下文的组件更高的位置。在这种情况下，你可以简单地将Signup包装在Provider组件中，它可以使用useDispatch钩子。

的例子:

<Provider store={store}> // <-- provides redux context to sub-ReactTree
...
<Signup />
...
</Provider>

export default function Signup(props) {
const router = useRouter();
const dispatch = useDispatch(); // <-- can access redux context now
...
return (
<section>
...
</section>
);
}