React 将类转换为功能组件问题

Question

我正在尝试将React Scheduler 与我的班次数据库一起使用。尝试使用钩子而不是类后的当前状态是我无法编辑表单中的任何字段。我已经删除了一些代码以使其更清晰，现在我只尝试添加一个班次。

React Scheduler 原代码：

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler,
  Appointments,
  AppointmentForm,
  AppointmentTooltip,
  WeekView,
} from '@devexpress/dx-react-scheduler-material-ui';
import { appointments } from '../../../demo-data/appointments';

export default class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: appointments,
      currentDate: '2018-06-27',
      addedAppointment: {},
      appointmentChanges: {},
      editingAppointment: undefined,
    };

    this.commitChanges = this.commitChanges.bind(this);
    this.changeAddedAppointment = this.changeAddedAppointment.bind(this);
    this.changeAppointmentChanges = this.changeAppointmentChanges.bind(this);
    this.changeEditingAppointment = this.changeEditingAppointment.bind(this);
  }

  changeAddedAppointment(addedAppointment) {
    this.setState({ addedAppointment });
  }

  changeAppointmentChanges(appointmentChanges) {
    this.setState({ appointmentChanges });
  }

  changeEditingAppointment(editingAppointment) {
    this.setState({ editingAppointment });
  }

  commitChanges({ added, changed, deleted }) {
    this.setState((state) => {
      let { data } = state;
      if (added) {
        const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
        data = [...data, { id: startingAddedId, ...added }];
      }
      return { data };
    });
  }

  render() {
    const {
      currentDate, data, addedAppointment, appointmentChanges, editingAppointment,
    } = this.state;

    return (
      <Paper>
        <Scheduler
          data={data}
          height={660}
        >
          <ViewState
            currentDate={currentDate}
          />
          <EditingState
            onCommitChanges={this.commitChanges}
            addedAppointment={addedAppointment}
            onAddedAppointmentChange={this.changeAddedAppointment}
            appointmentChanges={appointmentChanges}
            onAppointmentChangesChange={this.changeAppointmentChanges}
            editingAppointment={editingAppointment}
            onEditingAppointmentChange={this.changeEditingAppointment}
          />
          <WeekView
            startDayHour={9}
            endDayHour={17}
          />
          <Appointments />
          <AppointmentTooltip
            showOpenButton
            showDeleteButton
          />
          <AppointmentForm />
        </Scheduler>
      </Paper>
    );
  }
}

我的功能组件代码：

import React, { useState } from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler,
  Appointments,
  AppointmentForm,
  AppointmentTooltip,
  WeekView,
  ConfirmationDialog,
} from '@devexpress/dx-react-scheduler-material-ui';
  
const DataSheet = ( { addShift, shifts, deleteShift } ) => {
    const [data, setData] = useState(shifts)
    const [currentDate, setCurrentDate] = useState('2018-06-27')
    const [addedAppointment, setAddedAppointment] = useState({})
    const [appointmentChanges, setAppointmentChanges] = useState({})
    const [editingAppointment, setEditingAppointment] = useState(undefined)
  
    const changeAddedAppointment = (addedAppointment) => {
        setAddedAppointment({ addedAppointment });
    }

    const changeAppointmentChanges = (appointmentChanges) => {
        setAppointmentChanges({ appointmentChanges });
    }

    const changeEditingAppointment = (editingAppointment) => {
        setEditingAppointment({ editingAppointment });
    }

    const commitChanges = ({ added, changed, deleted }) => {
    setData ((????) => {
      let { data } = data;
      console.log(data);  //returns undefined
      if (added) {
        const startingAddedId = data > 0 ? data[data.length - 1].id + 1 : 0;  
        data = [...data, { id: startingAddedId, ...added }];
        addShift(added);
      }
      return { data };
    });
  }

    return (
      <Paper>
        <Scheduler
          data={data}
          height={660}
        >
          <ViewState
            currentDate={currentDate}
          />
          <EditingState
            onCommitChanges={commitChanges}
            addedAppointment={addedAppointment}
            onAddedAppointmentChange={changeAddedAppointment}
            appointmentChanges={appointmentChanges}
            onAppointmentChangesChange={changeAppointmentChanges}
            editingAppointment={editingAppointment}
            onEditingAppointmentChange={changeEditingAppointment}
          />
          <WeekView
            startDayHour={9}
            endDayHour={17}
          />
          <Appointments />
          <AppointmentTooltip
            showOpenButton
            showDeleteButton
          />
          <AppointmentForm />
        </Scheduler>
      </Paper>
    );
}

export default DataSheet

App.js：

import React from 'react';
import backgroundImage from './Resources/BennyBackground.jpeg'
import Header from "./components/Header";
import { useState, useEffect } from "react"
import DataSheet from './components/DataSheet';

const containerStyle= {
  width: '100vw',
  height: '100vh',
  backgroundImage: `url(${backgroundImage})`,
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
}

const App = () => {
  const [shifts, setShifts] = useState([])
  useEffect(() => {
    const getShifts = async () => {
      const shiftsFromServer = await fetchShifts()
      setShifts(shiftsFromServer)
    }
    getShifts()
  }, [])

  const fetchShifts = async () => {
    const res = await fetch(`http://localhost:5000/shifts/`)
    const data = await res.json()
    return data
  }

const addShift = async (shift) => {
  const startingAddedId = shifts.length > 0 ? shifts[shifts.length - 1].id + 1 : 0;
  shift.id = startingAddedId;
  const res = await fetch(`http://localhost:5000/shifts/`,{
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify(shift)
  })

  const data = await res.json()

  setShifts([...shifts, data])
} 

  return (
    <div className="container"
    style={containerStyle} >
      <div className='secondary_container'>
        <Header />
        <DataSheet shifts={shifts} addShift={addShift}/>
      </div>
    </div>
  );
}

export default App;

我知道这需要很多代码和很多问题，我非常感谢您对此提供帮助。

Answer 1

我认为问题在于您使用 setXxx 就像使用 this.setState 一样。在类组件中，您有一个修改所有状态的函数 (this.setState)，而在函数组件中，您对每个字段都有一个 setter 函数。

所以改变这个：

const changeAddedAppointment = (addedAppointment) => {
    setAddedAppointment({ addedAppointment });
}

到这里：

const changeAddedAppointment = (addedAppointment) => {
    setAddedAppointment(addedAppointment);
}

就commitChanges 函数而言，您可以在使用setData 之前进行数据操作。另外我不确定这个let { data } = data 是否会起作用，因为已经有一个data 字段。你可以试试这个：

const commitChanges = ({ added, changed, deleted }) => {
    let newData = [...data.data];
    if (added) {
        const startingAddedId = newData > 0 ? newData [data.length - 1].id + 1 : 0;  
        newData = [...newData , { id: startingAddedId, ...added }];
        addShift(added);
      }
    setData(newData);
};