Question

如果我有两个组件，一个驻留formData变量（父Login组件），另一个保持表单本身（取自React material UI），那么我将如何连接这两个组件，如果我需要吗？因为就目前而言，我的jwt令牌是在Node后端生成的，但是分派似乎不想发送出response.data。

 import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";

 import { login } from "../../actions/auth";
 import SignIn from "../../material/SignIn";

 const Login = ({ login, isAuthenticated }) => {
      const [formData, setFormData] = useState({
           email: "",
           password: ""
      });

      const { email, password } = formData;

      const onChange = e => {
           setFormData({ ...formData, [e.target.name]: e.target.value });
      };

      const onSubmit = e => {
           login(email, password);
      };

      // Redirect if logged in
      if (isAuthenticated) {
           return <Redirect to="/dashboard" />;
      }

      return (
           <Fragment>
                <SignIn
                     email={email}
                     password={password}
                     onSubmit={onSubmit}
                     onChange={onChange}
                     isAuthenticated={isAuthenticated}
                />
           </Fragment>
      );
 };

 const mapStateToProps = state => ({
      isAuthenticated: state.auth.isAuthenticated
 });

 export default connect(
      mapStateToProps,
      { setAlert, login }
 )(Login);

SignIn组件是：

 import React, { useState } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import TextField from "@material-ui/core/TextField";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import Link from "@material-ui/core/Link";
 import Grid from "@material-ui/core/Grid";
 import Box from "@material-ui/core/Box";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";

 function MadeWithLove() {
      return (
      <Typography variant="body2" color="textSecondary" align="center">
           {"Built with love by the "}
           <Link color="inherit" href="https://material-ui.com/">
                Material-UI
           </Link>
           {" team."}
      </Typography>
      );
 }

 const useStyles = makeStyles(theme => ({
      "@global": {
      body: {
           backgroundColor: theme.palette.common.white
      }
      },
      paper: {
           marginTop: theme.spacing(8),
           display: "flex",
           flexDirection: "column",
           alignItems: "center"
      },
      avatar: {
           margin: theme.spacing(1),
           backgroundColor: theme.palette.secondary.main
      },
      form: {
           width: "100%", // Fix IE 11 issue.
           marginTop: theme.spacing(1)
      },
      submit: {
           margin: theme.spacing(3, 0, 2)
      }
 }));

 export default function SignIn({ email, password, onChange, onSubmit }) {
      const classes = useStyles();

      return (
           <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                     <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                     Sign in
                </Typography>
                <form onSubmit={e => onSubmit(e)} className={classes.form} noValidate>
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          id="email"
                          label="Email Address"
                          name="email"
                          value={email}
                          autoFocus
                     />
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          name="password"
                          label="Password"
                          type="password"
                          value={password}
                          id="password"
                          autoComplete="current-password"
                     />
                     <FormControlLabel
                          control={<Checkbox value="remember" color="primary" />}
                          label="Remember me"
                     />
                     <Button
                          type="submit"
                          fullWidth
                          variant="contained"
                          color="primary"
                          className={classes.submit}
                     >
                     Sign In
                     </Button>
                     <Grid container>
                          <Grid item xs>
                               <Link href="#" variant="body2">
                                    Forgot password?
                               </Link>
                          </Grid>
                               <Grid item>
                               <Link href="#" variant="body2">
                                    {"Don't have an account? Sign Up"}
                               </Link>
                          </Grid>
                     </Grid>
                </form>
                </div>
                <Box mt={5}>
                     <MadeWithLove />
                </Box>
           </Container>
      );
 }

如何将SignIn组件连接到Login组件？

Answer 1

两个组件之间的数据流似乎还可以，特别是如果您的后端在接收到登录数据时生成适当的令牌。从后端取回数据的关键在于登录“ thunk”操作。之后，您需要分派另一个操作，该操作将由化简器处理，以更新Redux存储。

快速的Google搜索将我引到https://alligator.io/redux/redux-thunk/，很好地展示了我所谈论的示例。让我知道这是否对您有帮助，或者您还有其他疑问！

如何将子组件连接到Redux连接的组件？

1 个答案: