React 箭头函数组件 - setState 未定义

Question

我正在尝试在箭头函数组件中设置状态，但出现错误 "setState is not defined"。

我尝试使用 setState({ selectedSlot }) 和 this.setState({ selectedSlot }) 在 handleChange 中设置状态，但没有任何效果。

 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

 let state = {
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 };

 let handleChange = (event, value) => {
   let selectedSlot = state.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

Answer 1

要在功能组件内部实现有状态逻辑，请使用 hooks:

 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

 const [state, setState] = React.useState({
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 })


 let handleChange = (event, value) => {
   const _state = {...state}
   let selectedSlot = _state.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ ..._state, selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

Answer 2

为了在功能组件中使用状态，我们使用所谓的反应挂钩。在你的例子中，这个钩子看起来像这样。

 const [state, setState] = React.useState({
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 })

我们这里用到了数组解构。第一个值是状态本身，第二个值是我们用来设置状态的方法。在 React.useState 中，我们预先定义了初始状态。使用 setState 你可以改变我们当前的状态。

要覆盖当前状态数据，我们只需将状态设置为已经存在的属性。如果属性不存在，将添加一个新的到状态。

当然，因为它是一个钩子，所以必须导入它。

import React, { useState } from 'react';

Answer 3

您不能在函数式 component.In 中使用 setState 命令，您必须使用 react hook 的 useState。

import React,{useState} from 'react'
 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

const [state,setState]=useState({
 selectedSlot:{},
 cal:1

})

 let handleChange = (event, value) => {
  const newState = {...state}
   let selectedSlot = newState.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ ...newState, selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

Answer 4

为了将来，请确保您了解您在此代码中使用的是函数组件；功能组件是无状态组件。这就是为什么您会收到有关已定义状态的错误的原因。如果您打算使用状态，则使用用作有状态组件的 class 组件。对于 class 组件，您可以在 render 方法之前使用接受 "props" 作为参数的构造函数来设置初始状态。要使此代码正常工作，请将此功能组件切换为 class 组件并在构造函数中定义初始状态。

React 箭头函数组件 - setState 未定义

React Arrow Function Component - setState is not defined

javascript

reactjs

arrow-functions