在输入搜索和 onClick 之后渲染元素

Question

我有一个无法解决的问题。我有两个组件：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 商店并分配给房间。该值在 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) {
      [roomsData].map((room) => {
        return <Room key={room.id} roomData={room} />;
      });
    } else {
      return <h2>Search your Room!!</h2>;
    }
  };

  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;

我的问题是，在搜索之后，我在传递了全局状态中的所有数据后没有呈现我的 Room。加载完成后，我的 loading 设置为 false。所有逻辑都在我的父组件中完成，所有数据都移动到子 eservationForm.js

Answer 1

从你的 redux state 房间是一个数组，所以要映射它

roomsData.map((room) => {
  return <Room key={room.id} roomData={room} />;
});

代替

[roomsData].map((room) => {
  return <Room key={room.id} roomData={room} />;
});