在 setState 中响应推送 Api 响应

Question

in my EventForm i have this const, this is a dialog form

this is my EventForm.js

const EventForm = (props) => {

const { setOpenPopup, records, setRecords, setMessage, setOpenSnackbar } = props

const addEvent = () => {
    axios.post('https://jsonplaceholder.typicode.com/events', (event)
      .then(resp => {
        console.log(resp.data)
        const newData = [{
          title: resp.data.name,
          start: resp.data.starts_at,
          end:  resp.data.ends_at
        }]
        setRecords([{ ...records, newData}])
        //
        setOpenPopup(false)
        setMessage('New Event added')
        setOpenSnackbar(true)
      })
      .catch([])
  }



export default EventForm
EventForm.propTypes = {
  setOpenPopup: PropTypes.func,
  records: PropTypes.array,
  setRecords: PropTypes.func,
  setMessage: PropTypes.func,
  setOpenSnackbar: PropTypes.func
}

}

in my EventTable.js

 const [records, setRecords] = useState([]);

useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/events')
  .then(resp => {
    const newData = resp.data.map((item) => ({
      title: item.name,
      start: item.starts_at,
      end:  item.ends_at
    }))
    setRecords(newData)
  })
  .catch(resp => console.log(resp))
  }, [])



fullcalendar...
 events={records}

im trying to push the API post response to my setRecords. so when the dialog form close it will not use the GET response. ill just get the new record and render to my view

but im getting an error:

Unhanded Rejection (TypeError): setRecords is not a function

Answer 1

I suspect you are using React Hooks. Make sure that your records state looks like this

const [records, setRecords] = useState([]);

In your axios request, it looks like that you are trying to spread the values of records which is an array to an object. I'd suggest refactoring this to something like this. Instead of trying to spread an array into the object, take the previous state and merge it with the new one.

setRecords(prevRecords => [...prevRecords, ...newData])

Here's an example using React Hooks how the component could look like

import React from "react";
import axios from "axios";

const MyComponent = ({
  setOpenPopup,
  records,
  setRecords,
  setMessage,
  setOpenSnackbar
}) => {
  const addEvent = () => {
    axios
      .post("https://jsonplaceholder.typicode.com/events", event) // Make sure this is defined somewhere
      .then((resp) => {
        const { name, starts_at, ends_at } = resp.data;
        const newData = [
          {
            title: name,
            start: starts_at,
            end: ends_at
          }
        ];

        setRecords((prevRecords) => [...prevRecords, ...newData]);
        setOpenPopup(false);
        setMessage("New Event added");
        setOpenSnackbar(true);
      })
      .catch([]);
  };

  return (
    <div>
      <button onClick={addEvent}>Click me </button>
    </div>
  );
};

export default MyComponent;

If you are not using React Hooks and use Class components, then make sure that you pass setRecords to your component in props. Plus, in your props destructuring, make sure you add this to the props, otherwise, it can lead to unwanted behaviour. Also, move your request function out of the render method and destructure values from the props that you need inside the function. I've also noticed that your axios syntax was incorrect (forgot to close after the event) so I fixed that as well. Here's an example of how you can improve it.

import React from "react";
import axios from "axios";

class MyComponent extends React.Component {
  addEvent = () => {
    const {
      setOpenPopup,
      setRecords,
      setMessage,
      setOpenSnackbar
    } = this.props;

    axios
      .post("https://jsonplaceholder.typicode.com/events", event)
      .then((resp) => {
        console.log(resp.data);
        const newData = [
          {
            title: resp.data.name,
            start: resp.data.starts_at,
            end: resp.data.ends_at
          }
        ];
        setRecords((prevRecords) => [...prevRecords, ...newData]);
        //
        setOpenPopup(false);
        setMessage("New Event added");
        setOpenSnackbar(true);
      })
      .catch([]);
  };

  render() {
    return (
      <div>
        <button onClick={() => this.addEvent()}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;