0

useEffect在他们从下拉列表中选择用户选择时间后，我试图让他们向我展示用户选择的时间。我的同事帮助我开始使用钩子，但我完全不知道该怎么做。经过几天的尝试，我必须寻求帮助。

目前，它正确显示了来自数据库的时间，当页面被加载时，但是NaN当用户选择了任何数字时，它给出了......下面正确生成的表的图片（数据库值）。

简而言之：TimeClass是我试图将新时间信息 ( reservations) 放入的下拉选择TimeChanger。从那以后一切都很好，它只是按照我的计划保存到数据库中。

主要的：

export default () => {

  // collect the necessary information from the database
  const {data: reservationsData} = useAxios(`/api/reservations`);

  const [reservations, reservationsDispatch] = useReducer(reservationsReducer,reservationsData);
  useEffect(() => {
    reservationsDispatch({
      type: 'replace',
      data: reservationsData
    });
  }, [reservationsData]);

  const startPicker = reservations[row - 1].start_time;
  const endPicker = reservations[row - 1].end_time;
  const start = moment(startPicker, "hh:mm:ss").toDate();
  const end = moment(endPicker, "hh:mm:ss").toDate();

  //return everything
  return (
    <Page>
      { 
      // ... all code inside here is actually in other function, 
      // just trying to make it shorter and putting it here  
      }

      { _.times(2, (column)=>
        <TimeClass
          key={column}
          time={start} 
          endTime={end} 
          column={column} // creates 2 columns of times
          setTime={time => reservationsDispatch({
            type: 'setTime',
            row, // chooses, which row in the table the time goes
            col, // makes sure we are in col1, not confused with column
          })}
        />
      )}
      <TimeChanger
        row={row}
        reservations={reservations}
      />
    </Page>
  );
}

时间类：

function TimeClass ({ time, endTime, column, setTime }) {

  // changes "time", if needed
  if (column === 1) {
    time = endTime;
  }

  return (
      <DatePicker
        selected={time}
        onChange={setTime}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
      />
  );
}

预留减速器：

function reservationsReducer(state, action) {
  switch (action.type) {
    case 'replace':
      return action.data;
    case 'setTime':
      // what should be put here? How to get info here and out of here
      return TimeClass(/* what to return */);
    default:
      throw new Error();
  }
}
4

0 回答 0