好的,我遇到了一个困扰了我几个小时的问题,我一生都无法看到问题所在。
之所以发生这种情况,是因为将renderGuestOptions用作renderGuestPrices中的组件。奇怪的是,如果我将其从箭头功能更改为普通的function(){},那么它可以工作,但是后来我无法访问“ this”来更新状态。
我只使用React和ReactDOM,并且没有使用任何导出。
错误文字: 警告:React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者您可能混淆了默认导入和命名导入。
import React from 'react';
import ReactDOM from 'react-dom'
class TimeSlots extends React.Component {
constructor(props) {
super(props);
this.telephone = getCalendarWrapper().dataset.telephone;
// this.timeSlotButtons = React.createRef();
// this.monthPrevious = React.createRef();
// this.monthPreviousByYear = React.createRef();
// this.monthForward = React.createRef();
// this.monthForwardByYear = React.createRef();
this.state = {
currentDate: this.props.currentDate,
timesAvailable: this.props.timesAvailable,
guests: null,
guestsSelected: null,
timeSlotSelected: null,
bookingModal: {
show: false
},
}
console.log(this.props.roomSlug);
console.log(this.props.currentDate);
console.log(this.props.timesAvailable);
}
// -----------------
// -- RENDERS GUEST OPTIONS WHEN USER HAS CLICKED A TIME SLOT
// -----------------
renderGuestOptions = (props) => {
// renderGuestOptions(props) {
// const guestDataTest = props.guestData.guestData;
const guestData = props.guestData;
console.log(this);
if (guestData) {
return(
// onChange we update the guestSelected state, which will then be used in the ajax request if its added
<select className="form-control" onChange={(event) => console.log(event.target.value)}>
{/* <select className="form-control" onChange={(event) => this.setState({guestsSelected: event.target.value})}> */}
{Object.keys(guestData).map(function(key) {
return <option key={key} value={key}>{key} People - £{guestData[key]}</option>
})}
</select>
);
} else {
return <h2>Sorry no times are available</h2>;
}
}
renderGuestPrices = () => {
if (!this.state.timeSlotSelected && !this.state.guests) {
return <div></div>;
}
return(
<form className="timeslot row" onSubmit={this.formSubmitHandler}>
<div className="col-12 mb-3 text-center">
<span className="title title--h2">How Many Guests?</span>
</div>
<div className="col-12 mb-3 mb-md-4">
<this.renderGuestOptions guestData={this.state.guests} />
</div>
<div className="col-12 text-center mb-3 mb-md-4">
<div className="room-calendar__timeslots__help">
<a href={"tel:" + this.telephone.replace(/ /g, '')}><i className="fa fa-phone"></i> {this.telephone}</a>
</div>
</div>
<div className="col-12">
<div className="d-block px-4">
<button className="btn d-block w-100 mb-3" type="submit">Add To Basket</button>
{/* <span className="btn d-block mb-3" onClick={() => this.addToBasketHandler()}>Add To Basket</span> */}
<button className="btn d-block w-100" type="submit">Book and Pay</button>
</div>
{/* <span className="btn">Book and Pay</span> */}
</div>
<div className="col-12">
</div>
<div className="room-calendar__timeslots__please-note col-12 text-center mt-4">
<p className="text-uppercase text-">Please note - adding to basket will redirect you to the locations page</p>
</div>
</form>
);
}
}
答案 0 :(得分:0)
尝试执行以下操作:
import ReactDOM from 'react-dom';
export default class TimeSlots extends React.Component {
constructor(props) {
super(props);
this.telephone = getCalendarWrapper().dataset.telephone;
// this.timeSlotButtons = React.createRef();
// this.monthPrevious = React.createRef();
// this.monthPreviousByYear = React.createRef();
// this.monthForward = React.createRef();
// this.monthForwardByYear = React.createRef();
this.state = {
currentDate: this.props.currentDate,
timesAvailable: this.props.timesAvailable,
guests: null,
guestsSelected: null,
timeSlotSelected: null,
bookingModal: {
show: false
}
};
console.log(this.props.roomSlug);
console.log(this.props.currentDate);
console.log(this.props.timesAvailable);
}
// -----------------
// -- RENDERS GUEST OPTIONS WHEN USER HAS CLICKED A TIME SLOT
// -----------------
renderGuestOptions() {
// renderGuestOptions(props) {
// const guestDataTest = props.guestData.guestData;
const guestData = this.props.guestData;
console.log(this);
if (guestData) {
return (
// onChange we update the guestSelected state, which will then be used in the ajax request if its added
<select
className="form-control"
onChange={event => console.log(event.target.value)}
>
{/* <select className="form-control" onChange={(event) => this.setState({guestsSelected: event.target.value})}> */}
{Object.keys(guestData).map(function(key) {
return (
<option key={key} value={key}>
{key} People - £{guestData[key]}
</option>
);
})}
</select>
);
} else {
return <h2>Sorry no times are available</h2>;
}
};
renderGuestPrices() {
if (!this.state.timeSlotSelected && !this.state.guests) {
return <div></div>;
}
return (
<form className="timeslot row" onSubmit={this.formSubmitHandler}>
<div className="col-12 mb-3 text-center">
<span className="title title--h2">How Many Guests?</span>
</div>
<div className="col-12 mb-3 mb-md-4">
<renderGuestOptions guestData={this.state.guests} />
</div>
<div className="col-12 text-center mb-3 mb-md-4">
<div className="room-calendar__timeslots__help">
<a href={'tel:' + this.telephone.replace(/ /g, '')}>
<i className="fa fa-phone"></i> {this.telephone}
</a>
</div>
</div>
<div className="col-12">
<div className="d-block px-4">
<button className="btn d-block w-100 mb-3" type="submit">
Add To Basket
</button>
{/* <span className="btn d-block mb-3" onClick={() => this.addToBasketHandler()}>Add To Basket</span> */}
<button className="btn d-block w-100" type="submit">
Book and Pay
</button>
</div>
{/* <span className="btn">Book and Pay</span> */}
</div>
<div className="col-12"></div>
<div className="room-calendar__timeslots__please-note col-12 text-center mt-4">
<p className="text-uppercase text-">
Please note - adding to basket will redirect you to the locations
page
</p>
</div>
</form>
);
};
render() {
return <renderGuestPrices />;
}
}