Моя форма реагирования для обновления данных профиля в настоящее время взаимодействует с пожарным хранилищем только при изменении всех входных данных.
Текущая ошибка;
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, и я очень надеюсь, что решение будет чем-то супер глупым: «firestore не позволит вам использовать функцию обновления, если fieldValues идентичны».
Мой мозг в настоящее время имеетобратился в кашу, так что сдался. Пожалуйста, помогите?
Заранее спасибо всем, кто дает это в любое время:)