Question

我正在尝试将数据从我的状态加载到我的表单中并挣扎。

我登录并将电子邮件和令牌保存到Redux状态。当我推送到其中包含表单的测试页面时，我无法在表单中显示电子邮件。为什么我不能加载电子邮件？我可以在TestPage.js上看到它，但不能在TestForm上看到它。

TestPage.js

import React from "react";
import PropTypes from 'prop-types'; 
import { connect } from "react-redux";
import TestForm from "../forms/TestForm";

class TestPage extends React.Component {

  render() {
    const { isAuthenticated, email } = this.props;
    return (
      <div>
        { isAuthenticated && <h1> { email } </h1> }
        <TestForm submit={this.submit} props={ this.props } />
      </div>
    );
  }
}

TestPage.propTypes = {
  email: PropTypes.string.isRequired,
  isAuthenticated : PropTypes.bool.isRequired
};

function mapStateToProps(state){
    return {
      email : state.user.email,
      isAuthenticated : !!state.user.token
    };
};

export default connect (mapStateToProps )(TestPage);

TestForm.js

import React from 'react'
import { Form, Button } from "semantic-ui-react";
import { connect } from "react-redux";

class TestForm extends React.Component {
  state = {
    name : '',
    email : '',
    isActive : true
  }

  onSubmit = e => { 
    e.preventDefault();
    console.log("state = " + JSON.stringify(this.state));
  }

  componentDidMount(){
    this.setState(this.props);
    this.onInit(this.props);
    console.log(" this props email =  " + JSON.stringify(this.props));
    console.log(" this state email =  " + JSON.stringify(this.state.email ));
  }

  onInit = (props) => {
    console.log(" this props email =  " + JSON.stringify(this.props));
    console.log(" this state email =  " + JSON.stringify(this.state.email ));
  }


  render() {

    const { state, loading } = this;

    const { handleSubmit } = this.props;  
   return (
      <div>
        <Form onSubmit={this.onSubmit} loading={loading}>
          <Form.Field >
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="example@example.com"
              value={this.state.data.email}
              onChange={this.onChange}
            />
          </Form.Field>
          <Button primary>Login</Button>
        </Form>
      </div>
    )
  }
};

function mapStateToProps(state){
    return {
      state : this.state
    };
}

export default connect(mapStateToProps)(TestForm);

Answer 1

你有一些错误和一些你可以改进的有用的东西，让我们检查一下：

1）在这里，您要将this.props设置为props，这不是一个好方法，因为它令人困惑，实际上您必须使用this.props.props访问，这不是所需的命名约定。

<TestForm submit={this.submit} props={ this.props } />

将其更改为此，使用扩展运算符。

<TestForm submit={this.submit} {...this.props } />

2）在这里，当你按照我在＃1上说的this.setState(this.props);时，你将设置一个物体，你的道具将在道具内。所以当你this.state.email this.state.props.email时，它应该是componentDidMount(){ this.setState(this.props); this.onInit(this.props); console.log(" this props email = " + JSON.stringify(this.props)); console.log(" this state email = " + JSON.stringify(this.state.email )); }。

{
    "handleSubmit": function, 
    "props": {
        "name" : '',
        "email" : '',
        "isActive" : true
      }
}

基本上你的道具对象看起来像这样：

this.state.email

所以直接映射到状态会使props={something}不存在。

所以，为了解决这个问题，你需要正确使用你的道具，正如我所说，在组件上使用Could not find com.google.firebase:firebase-invites:15.0.2. Searched in the following locations: file:/D:/SDK/extras/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom file:/D:/SDK/extras/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar file:/D:/SDK/extras/google/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom file:/D:/SDK/extras/google/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar file:/D:/SDK/extras/android/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom file:/D:/SDK/extras/android/m2repository/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar https://dl.google.com/dl/android/maven2/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom https://dl.google.com/dl/android/maven2/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar https://jcenter.bintray.com/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom https://jcenter.bintray.com/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar https://jitpack.io/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom https://jitpack.io/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar https://maven.fabric.io/public/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.pom https://maven.fabric.io/public/com/google/firebase/firebase-invites/15.0.2/firebase-invites-15.0.2.jar Required by: project :app会误导你在组件中的使用，这就是你现在正在发生的事情。

React - 无法从Redux获取数据

1 个答案: