Javascript 我应该将提供者redux放在哪里？
我是新手，我尝试进行JWT身份验证，但是我找到的教程和我想要使用的新antd之间存在一些不兼容之处。如下所示的错误， 我试图添加一个提供者，但我可能没有正确地放置它。您能帮助我吗？这是我的登录页面：Javascript 我应该将提供者redux放在哪里？,javascript,reactjs,redux,antd,Javascript,Reactjs,Redux,Antd,我是新手，我尝试进行JWT身份验证，但是我找到的教程和我想要使用的新antd之间存在一些不兼容之处。如下所示的错误， 我试图添加一个提供者，但我可能没有正确地放置它。您能帮助我吗？这是我的登录页面： import React from 'react'; import { Form, Icon, Input, Button, Spin } from 'antd'; import { connect } from 'react-redux'; import { NavLink } from 'rea
import React from 'react';
import { Form, Icon, Input, Button, Spin } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';
import { Provider } from 'react-redux'
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
this.props.onAuth(values.userName, values.password);
this.props.history.push('/');
}
});
}
render() {
let errorMessage = null;
if (this.props.error) {
errorMessage = (
<p>{this.props.error.message}</p>
);
}
const { getFieldDecorator } = this.props.form;
return (
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
Or
<NavLink
style={{marginRight: '10px'}}
to='/signup/'> signup
</NavLink>
</Form.Item>
</Form>
}
</div>
);
}
}
function mapStateToProps(state) {
return {
loading: state.loading,
error: state.error
}
}
function mapDispatchToProps(dispatch){
return {
onAuth: (username, password) => dispatch(actions.authLogin(username, password))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NormalLoginForm);
我看到您正在导入{Provider}，但我认为它没有被使用。您想要访问状态的任何组件都需要包装在此组件中。对于您的代码示例，请尝试以下操作：
return (
<Provider>
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
Or
<NavLink
style={{marginRight: '10px'}}
to='/signup/'> signup
</NavLink>
</Form.Item>
</Form>
}
</div>
<Provider />
);
返回(
{errorMessage}
{
这是道具装载吗？
:
登录
或
报名
}
);
但是，这看起来像是应用程序的单个组件。假设您希望访问Redux应用商店的组件更多，最好将整个应用程序包装在顶级提供商中。使用Redux提供商包装整个应用程序。 您需要从redux导入您的商店； 并将存储设置为提供程序，并使用MapStateTops从所有组件获取存储数据
return (
<Provider store={store}>
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
Or
<NavLink
style={{marginRight: '10px'}}
to='/signup/'> signup
</NavLink>
</Form.Item>
</Form>
}
</div>
<Provider />
);
返回(
{errorMessage}
{
这是道具装载吗？
:
登录
或
报名
}
);
redux提供程序必须是App.js的包装器，才能在其所有组件中使用该应用商店。包装从其或其子组件访问redux应用商店所需的组件。它可以是主组件或其他组件。ReactDOM.render（，document.getElementById（'root'）；像这样？好的，但是应该在{}from store中添加“？？”的insead吗？@anamariafanasov您将把用createStore创建的存储作为值添加到Provider中的store prop中
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at Login.js:55.
return (
<Provider>
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
Or
<NavLink
style={{marginRight: '10px'}}
to='/signup/'> signup
</NavLink>
</Form.Item>
</Form>
}
</div>
<Provider />
);
return (
<Provider store={store}>
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
Or
<NavLink
style={{marginRight: '10px'}}
to='/signup/'> signup
</NavLink>
</Form.Item>
</Form>
}
</div>
<Provider />
);