Javascript 在设置状态中响应推送Api响应

在我的EventForm中，我有一个常量，这是一个对话框窗体

这是我的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
}

}

在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}

我试图将API post响应推送到我的setRecords。因此，当对话框窗体关闭时，它将不使用GET响应。我会拿到新唱片，然后呈现给我看

但是我得到了一个错误：

非故意拒绝（TypeError）：setRecords不是函数

---

我怀疑您正在使用React挂钩。确保您的

记录

状态如下所示

const[records，setRecords]=useState（[]）；

在您的

axios

请求中，您似乎试图将记录的值（作为数组）分散到对象。我建议把它重构成这样。与其尝试将数组分散到对象中，不如采用以前的状态并将其与新状态合并

setRecords（prevRecords=>[…prevRecords，…newData]）

下面是一个使用React钩子的示例，该组件可能是什么样子的

从“React”导入React；
从“axios”导入axios；
常量MyComponent=({
setOpenPopup，
记录，
设置记录，
设置消息，
setOpenSnackbar
}) => {
常量addEvent=（）=>{
axios
.post（“https://jsonplaceholder.typicode.com/events“，event）//确保在某个地方定义了此项
。然后（（resp）=>{
const{name，开始于，结束于}=resp.data；
常数newData=[
{
标题：姓名，
开始：开始于，
结束：结束于
}
];
setRecords（（prevRecords）=>[…prevRecords，…newData]）；
setOpenPopup（假）；
setMessage（“新增事件”）；
setOpenSnackbar（true）；
})
.渔获量（[]）；
};
返回(
点击我
);
};
导出默认MyComponent；

如果您没有使用React钩子和类组件，那么请确保在props中将

setRecords

传递给您的组件。另外，在你的道具解构中，确保你在道具中添加

this

，否则会导致不必要的行为。另外，将请求函数移出

render

方法，并从函数中需要的道具中解构值。我还注意到您的

axios

语法不正确（在事件发生后忘记关闭），因此我也修复了这个问题。下面是一个如何改进的示例

从“React”导入React；
从“axios”导入axios；
类MyComponent扩展了React.Component{
addEvent=（）=>{
常数{
setOpenPopup，
设置记录，
设置消息，
setOpenSnackbar
}=这是道具；
axios
.post（“https://jsonplaceholder.typicode.com/events“，事件）
。然后（（resp）=>{
控制台日志（相应数据）；
常数newData=[
{
标题：resp.data.name，
开始：resp.data.start_在，
结束：分别数据结束于
}
];
setRecords（（prevRecords）=>[…prevRecords，…newData]）；
//
setOpenPopup（假）；
setMessage（“新增事件”）；
setOpenSnackbar（true）；
})
.渔获量（[]）；
};
render（）{
返回(
this.addEvent（）}>单击我
);
}
}
导出默认MyComponent；

请包括一个。错误提到了

SetRecord

，在您提供的代码中找不到它。我在const？@DeezNuuts no中设置了setRecords。您提到的错误是

SetRecord

，您解构的是

setRecords

，最后是一个“s”。另外，

setRecords

definition没有包含在问题中，你确定它是一个函数吗？你认为它是什么？@Jayce444我不确定。我现在使用React已经有2天了让我更新我的问题我将分开记录，在道具中设置记录？我说的对吗？我添加了一个带有类组件的示例。我用一些信息更新了我的问题检查了我放置的React类组件的示例。我还添加了一个带有React钩子的示例。