Question

我的用于更新配置文件数据的反应表单当前仅在更改所有输入后才与firestore交互。

当前错误；

TypeError：无法读取未定义的属性“ 0”” @ profileActions.js：10：4

我尝试检查过的东西； -道具调度到“ updateProfile”功能-工作 -将“ onChange”功能更改为“ onSubmit”-无效 -将必填项添加到所有输入字段-不起作用 -用占位符替换defaultValue-不起作用

Profile.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { updateProfile } from "../../actions/profileActions";
import Password from "./Password";
import { Redirect } from "react-router-dom";

class Profile extends Component {
  state = {
    firstName: this.props.profile.firstName,
    lastName: this.props.profile.lastName,
    businessName: this.props.profile.businessName,
    phoneNumber: this.props.profile.phoneNumber,
    email: this.props.profile.email
  };

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    //console.log.apply(this.state);
    this.props.updateProfile(this.state);
  };

  render() {
    const { profile, profileError, auth } = this.props;
    if (!auth.uid) return <Redirect to="/signin" />;
return (
  <div className="container-fluid">
    <form className="m-4" onSubmit={this.handleSubmit} to="/profile">
      <div>{/* FIX - red line appears when bg-white removed below */}</div>
      <div>
        {/* FIX - form only submits correctly when all inputs have been changed */}
      </div>
      <div
        className="alert-danger rounded col-xs-6 col-sm-6 col-md-6 col-lg-6 mx-auto bg-white"
        style={{ color: "#ff0000" }}
      >
        {profileError ? <p>{profileError}</p> : null}
      </div>
      <div className="row">
        <div className="col-xs-1 col-sm-1 col-md-1 col-lg-1" />
        <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 d-flex flex-column mx-auto">
          <div className="col-stretch rig-bot profile-label">
            <h5 className="">First name :</h5>
          </div>
          <br />
          <div className="col-stretch rig-bot profile-label">
            <h5 className="">Last name :</h5>
          </div>
          <br />
          <div className="col-stretch rig-bot profile-label">
            <h5 className="">Business name :</h5>
          </div>
          <br />
          <div className="col-stretch rig-bot profile-label">
            <h5 className="">Phone number :</h5>
          </div>
          <br />
          <div className="col-stretch rig-bot profile-label">
            <h5 className="">Email :</h5>
          </div>
          <br />
        </div>
        <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5 d-flex flex-column">
          <div className="form-label-group">
            <input
              type="text"
              id="firstName"
              className="form-control"
              defaultValue={profile.firstName}
              autoFocus
              onChange={this.handleChange}
            />
          </div>
          <br />
          <div className="form-label-group">
            <input
              type="text"
              id="lastName"
              className="form-control"
              defaultValue={profile.lastName}
              onChange={this.handleChange}
            />
          </div>
          <br />
          <div className="form-label-group">
            <input
              type="text"
              id="businessName"
              className="form-control"
              defaultValue={profile.businessName}
              onChange={this.handleChange}
            />
          </div>
          <br />
          <div className="form-label-group">
            <input
              type="tel"
              id="phoneNumber"
              className="form-control"
              defaultValue={profile.phoneNumber}
              onChange={this.handleChange}
            />
          </div>
          <br />
          <div className="form-label-group">
            <input
              type="email"
              id="email"
              className="form-control"
              defaultValue={profile.email}
              onChange={this.handleChange}
            />
          </div>
          <br />
        </div>
        <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3" />
      </div>
      <div className="row">
        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4 p-4 cen-mid mx-auto">
          <input
            className="btn btn-lg btn-primary btn-md"
            type="submit"
            value="Submit"
          />
        </div>
      </div>
    </form>
    <Password />
    <div className="y-100" />
  </div>


 );
  }
}

const mapStateToProps = state => {
  console.log(state);
  return {
    profile: state.firebase.profile,
    profileError: state.profile.profileError,
    auth: state.firebase.auth
  };
};

const mapDispatchToProps = dispatch => {
  return {
    updateProfile: profile => dispatch(updateProfile(profile))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Profile);

profileActions.js

export const updateProfile = props => {
  return (dispatch, getState, { getFirebase, getFirestore }) => {
    const firestore = getFirestore();
    const userId = getState().firebase.auth.uid;
    const firstName = props.firstName;
    const lastName = props.lastName;
    const initials = props.firstName[0] + props.lastName[0];
    const businessName = props.businessName;
    const phoneNumber = props.phoneNumber;
    const email = props.email;
    firestore
      .collection("users")
      .doc(userId)
      .update({
        firstName: firstName,
        lastName: lastName,
        initials: initials,
        businessName: businessName,
        phoneNumber: phoneNumber,
        email: email
      })
      .then(
        firestore.collection("auditProfile").add({
          userId: userId,
          action: "update",
          firstName: firstName,
          lastName: lastName,
          businessName: businessName,
          phoneNumber: phoneNumber,
          email: email,
          changedOn: new Date()
        })
      )
      .then(() => {
        dispatch({ type: "UPDATE_PROFILE" });
      })
      .catch(err => {
        dispatch({ type: "UPDATE_PROFILE_ERROR", err });
      });
  };
};

我目前没有附加到Firestore数据库的规则，我真的希望解决方案是超级愚蠢的； “如果fieldValues相同，firestore将不允许您使用更新功能。”

我的大脑目前变得糊涂了，所以放弃了。请帮忙吗？

在此先感谢任何随时提供此信息的人：）

Answer 1

要指出的一件事是，您正在onChange中设置状态值，但随后从未在输入中使用这些值-您从defaultValue获得props，但切勿分配value={this.state.profile.firstName}等。

您看到的错误指向profileActions.js中的props.firstName或props.lastName为null / undefined（尝试访问null / undefined上的第0个索引将引发TypeError）。您要在任何地方设置初始值吗？

我建议从状态中为您的每个输入获取value，并确保您具有姓氏和名字的初始数据。

当所有输入均已更改时，React表单仅更新firstestore文档

1 个答案: