React material-uiのDateTimePickersの値をパラメーターとして送信したい

Question

前提・実現したいこと

material-uiのDateTimePickersのvalueをパラメーターとして送信したい

ここに質問の内容を詳しく書いてください。
貸会議室の予約サイトを作っています。
予約用フォームとしてモーダルで表示しますが、material-uiのDateTimePickerのvalueを送信するやり方が分かりません。

###解決したいこと
エラーは出ていませんが、予約をするRooms.jsx内メソッドの、submitReserveが走ると、
ディベロッパーツールのNetworkのPreviewで

active: true
build_id: 2
count: 5
created_at: "2021-02-23T01:10:16.925Z"
datetime: null
id: 4
~~以下略~~

のようにDateTimePicerに入力された値であるdatetimeがnullになってしまいます。
これを正常に値が入るようにしたいです。

補足情報（FW/ツールのバージョンなど）

Ruby on rails6
React

該当のソースコード

#pre_reserveコントローラー
    class PreReservesController < ApplicationController
      before_action :set_room, only: %i[create replace]

      def index
      ~~~略~~~~
      end

      def create
        if PreReserve.active.other_build(@reserved_room.build.id).exists?
          return render json: {
            existing_build: PreReserve.other_build(@reserved_room.build.id).first.build.name,
            new_build: Room.find(params[:room_id]).build.name,
          }, status: :not_acceptable
        end

        def replace
          PreReserve.active.other_build(@oreserved_room.build.id).each do |pre_reserve|
            pre_reserve.update_attribute(:active, false)
        end
  
          set_pre_reserve(@reserved_room)
  
          if @pre_reserve.save
            render json: {
              pre_reserve: @pre_reserve
            }, status: :created
          else
            render json: {}, status: :internal_server_error
          end
        end

        set_pre_reserve(@reserved_room)

        if @pre_reserve.save
          render json: {
            pre_reserve: @pre_reserve
          }, status: :created
        else
          render json: {}, status: :internal_server_error
        end
      end

      private

      def set_room
        @reserved_room = Room.find(params[:room_id])
      end

      def set_pre_reserve(reserved_room)
        if reserved_room.pre_reserve.present?
          @pre_reserve = reserved_room.pre_reserve
          @pre_reserve.attributes = {
            count: reserved_room.pre_reserve.count + params[:count],
            datetime: reserved_room.pre_reserve.datetime,
            active: true
          }
        else
          @pre_reserve = reserved_room.build_pre_reserve(
            count: params[:count],
            datetime: params[:datetime],
            build: reserved_room.build,
            active: true
          )
        end
      end
    end

#Rooms.jsx
#import層略

#初期Stateを設定
export const Rooms = ({
  match
}) => {
  const history = useHistory();
  const [roomsState, dispatch] = useReducer(roomsReducer, roomsInitialState);
  const initialState = {
    isOpenReserveDialog: false,
    selectedRoom: null,
    selectedTimeCount: 1,
    selectedDatetime: Date.today,
    isOpenNewReserveDialog: false,
    existingBuildName: '',
    newBuildName: '',
}
const [state, setState] = useState(initialState);
  useEffect(() => {
    dispatch({ type: roomsActionTyps.FETCHING });
    fetchRooms(match.params.buildsId)
      .then((data) => {
        dispatch({
          type: roomsActionTyps.FETCH_SUCCESS,
          payload: {
            rooms: data.rooms
          }
        });
      })
  }, [])

#登録ボタンを押した時の処理
const submitReserve = () => {
    postPreReserve({
      roomId: state.selectedRoom.id,
      count: state.selectedTimeCount,
      datetime: state.selectedDatetime,
    }).then(() => history.push('/reserves'))
    .catch((e) => {
      if(e.response.status === HTTP_STATUS_CODE.NOT_ACCEPTABLE){
        setState({
          ...state,
          isOpenReserveDialog: false,
          isOpenNewReserveDialog: true,
          existingBuildName: e.response.data.existing_build,
          newBuildName: e.response.data.new_build,
        })
      } else {
        throw e;
      }
    })
  };
~略~
          <RoomReserveDialog
            room={state.selectedRoom}
            isOpen={state.isOpenReserveDialog}
            countNumber={state.selectedTimeCount}
               onClickCountUp={() => setState({
              ...state,
              selectedTimeCount: state.selectedTimeCount + 1,
            })}
            onClickCountDown={() => setState({
              ...state,
              selectedTimeCount: state.selectedTimeCount - 1,
            })}

            #予約時間が入力された際に、stateを上書きする処理
            handleDateChange={() => setState({
              ...state,
              selectedDatetime: state.setDatetime
            })}
          
            onClickReserve={() => submitReserve()}
            onClose={() => setState({
              ...state,
              isOpenReserveDialog: false,
              selectedRoom: null,
              selectedDatetime: selectedDatetime
              selectedTimeCount: 1,
            })}
          />

#RoomReservationDialog.jsx

~import層略~

export const RoomReserveDialog = ({
  room,
  isOpen,
  onClose,
  countNumber,
  onClickCountUp,
  onClickCountDown,
  onClickReserve,
}) => {
  return (
~略~
        <DateTimePickers/>
~略~
<ReserveButton onClick={() => onClickReserve()}>

#DateTimePickers.jsx

const DateTimePickers = () => {
  const classes = useStyles();
  const [selectedDatetime, setSelectedDatetime] = useState(Date.today);
  const handleDateChange = (datetime) => {
    setSelectedDatetime(datetime);
  };
  return (
    <form>
      <TextField
        id="datetime-local"
        type="datetime-local"
        value={selectedDatetime}
        onChange={handleDateChange}
        className={classes.textField}
      />
      </form>
  );
}

export default DateTimePickers;

#prereserve.js
import axios from 'axios';
import { PreReserve, PreReserveReplace } from '../urls/index'

#axiosを用いてapiを呼ぶ処理

export const postPreReserve =(params) => {
  return axios.post(PreReserve,
    {
      room_id: params.roomId,
      count: params.count,
      datetime: params.datetime, #エディタ上で"datetime": Unknownwordと表示されます。ここが原因...??
    }
  )
  .then(res => {
    return res.data
  })
  .catch((e) => { throw e; })
};

試したこと

DatetimePickers.jsx内でuseStateを用い、関数を渡す処理にしてみましたが、挙動に変化ありませんでした。

お手数をおかけしますがお力添えの方、よろしくお願い致します。

Comments

[siruku6]

一見して次の箇所がおかしいのですが、これはソースの通りでしょうか？
# Rooms.jsx

#予約時間が入力された際に、stateを上書きする処理
handleDateChange={() => setState({
...state,
selectedDatetime: state.setDatetime
})}

①selectedDatetime に state.setDatetime がセットされているが、setDatetimeの戻り値は Datetime？

②また、そもそも`setDatetime`というメソッドが記述されていない（今回記載していないファイルからimportしているのであれば、②は無視して大丈夫です）

[hoshi-takanori]

余計なお世話ですが、useState は一つの関数で複数回使うことができますので、state を一つのオブジェクトにまとめるよりも、各要素を個別に useState した方が分かりやすいと思います。