Идея состоит в том, чтобы передать имя, адрес электронной почты, телефон, порт и специальность в действие addSupplier, но передаваемые мной значения кажутся неопределенными при попытке отправить их в firebase. Здесь у нас есть компонент, ниже которого вы можете найти действие, в котором выполняется запрос firebase. Я получаю следующую ошибку:
Error: Reference.push failed: first argument contains undefined in property 'suppliers.name'
class SupplierForm extends React.Component {
addSupplierClick() {
const { name, email, phone, port, speciality } = this.props;
this.props.addSupplier({ name, email, phone, port, speciality});
}
onNameChanged(text) {
this.props.nameChanged(text);
}
onEmailChanged(text) {
this.props.emailChanged(text);
}
onPhoneChanged(text) {
this.props.phoneChanged(text);
}
render() {
const { name, email, phone, port, speciality } = this.props;
return(
<Form onSubmit = {this.addSupplierClick.bind(this)}>
<Form.Field>
<label htmlFor = "name"> Name </label>
<input
type = "name"
id = "name"
name = "name"
placeholder = "Ola Nordmann"
value = {name}
onChange = {this.onNameChanged.bind(this)}
/>
</Form.Field>
<Form.Field>
<label htmlFor = "email"> Email </label>
<input
type = "email"
id = "email"
name = "email"
placeholder = "[email protected]"
value = {email}
onChange = {this.onEmailChanged.bind(this)}
/>
</Form.Field>
<Form.Field>
<label htmlFor = "phone"> Phone </label>
<input
type = "phone"
id = "phone"
name = "phone"
placeholder = "99009900..."
value = {phone}
onChange = {this.onPhoneChanged.bind(this)}
/>
</Form.Field>
<Form.Field>
<label htmlFor = "port"> Port </label>
<input
type = "port"
id = "port"
name = "port"
placeholder = "Miami, Bergen..."
value = {port}
/>
</Form.Field>
<Form.Field>
<label htmlFor = "speciality"> Speciality </label>
<input
type = "speciality"
id = "speciality"
name = "speciality"
placeholder = "Glass, divers..."
value = {speciality}
/>
</Form.Field>
<Form.Field>
<Button className = "button" >
Add supplier
</Button>
</Form.Field>
</Form>
)}
}
const mapStateToProps = ({ suppAdd }) => {
const { name, email, phone, port, speciality } = suppAdd;
return {
name,
email,
phone,
port,
speciality
};
};
export default connect(mapStateToProps, {nameChanged, emailChanged,
phoneChanged, addSupplier})(SupplierForm);
Класс действия:
import fire from '../fire'
import {
....
ADD_SUPPLIER
} from './types';
export const addSupplier = ({
name,
email,
phone,
port,
speciality
}) => {
return (dispatch) => {
dispatch({
type: ADD_SUPPLIER
});
addSupplierInFirebase({
name,
email,
phone,
port,
speciality
});
}
}
const addSupplierInFirebase = ({
name,
email,
phone,
port,
speciality
}) => {
fire.database().ref(`/suppliers`).push({
name,
email,
phone,
port,
speciality
});
}
Если вы установите console.info (this.props.name) в начале функции addSupplierClick, будут ли отображаться соответствующие данные? также console.info (this.props.name) в функции рендеринга?