我有一个无法解决的问题。我有两个组件:ReservationMain.js 和 ReservationForm.js
ReservationMain.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReservationForm from './ReservationForm';
class ReservationMain extends Component {
state = {
formData: {
people: '',
beds: '',
},
};
static propTypes = {
searchRooms: PropTypes.func,
rooms: PropTypes.object.isRequired,
loading: PropTypes.bool,
};
onChange = (e) => {
// setting formData in the state properly
const { formData } = this.state;
let newFormData = { ...formData };
newFormData[e.target.name] = e.target.value;
this.setState({
formData: newFormData,
});
};
onSubmit = (e) => {
const { formData } = this.state;
const { searchRooms } = this.props;
e.preventDefault();
searchRooms(formData.people, formData.beds);
};
render() {
const { searchRooms, loading, rooms } = this.props;
const { ...formData } = this.state;
return (
<section>
<ReservationForm
roomsData={rooms}
formData={formData}
roomsSearch={searchRooms}
loading={loading}
onSubmit={this.onSubmit}
onChange={this.onChange}
/>
</section>
);
}
}
export default ReservationMain;
在我的 ReservationMain.js 中,我将 roomsData
作为道具传递给我的孩子 ReservationForm。 roomsData
连接到我的 redux 存储并分配给 rooms
。该值在 state 中设置。
ReservationForm.js
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import Room from '../Rooms/Room';
import ReservationDate from './ReservationDate';
const ReservationForm = ({
formData: { beds, people },
roomsSearch,
roomsData,
onSubmit,
onChange,
loading,
}) => {
const renderForm = () => {
return (
<form onSubmit={(e) => onSubmit(e)}>
<div className='input-field'>
<select
className='browser-default'
name='people'
value={people}
onChange={onChange}>
<option value='0'></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<small className='form-text'>How many people?</small>
</div>
<div className='input-field'>
<select
className='browser-default'
name='beds'
value={beds}
onChange={onChange}>
<option value='Select Bed'>Select Bed</option>
<option value='mix'>Mix</option>
<option value='king'>King Size</option>
<option value='single'>MERN</option>
</select>
<small className='form-text'>Select beds?</small>
</div>
<ReservationDate />
<input type='submit' className='btn' value='Search rooms' />
</form>
);
};
const renderRooms = () => {
if (loading === true || roomsData === undefined) {
console.log(roomsData);
return <h2>Search your Room!!</h2>;
} else {
return roomsData.map((room) => <Room key={room.id} roomData={room} />);
}
};
return (
<Fragment>
<h1>Book your room</h1>
{renderForm()}
{renderRooms()}
</Fragment>
);
};
ReservationForm.propTypes = {
roomsSearch: PropTypes.func,
formData: PropTypes.object.isRequired,
loading: PropTypes.bool,
onSubmit: PropTypes.func,
onChange: PropTypes.func,
};
export default ReservationForm;
``
`roomsData`, this prop I want to use as a value for my Room component that should render, based on values that I get, correct data on my site. My issue is, that i want to `map` through `roomsData` and then render my results with `renderRooms` whre I am using `map` and tha pass requierd data to my Room component. But right now I am gettin an error that `TypeError: roomsData.map is not a function`
Any hints what the hell I am doing wrong?
答案 0 :(得分:0)
所以我的问题是我正在返回一个对象,而对象没有 .map
。我有改变
roomsData
到 [roomsData]
并且它正在工作。