Question

我正在尝试在箭头功能组件中设置setState，但收到错误“未定义setState”。

我尝试使用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

要在功能组件中使用状态，我们使用所谓的react挂钩。在您的情况下，此钩子可能看起来像这样。

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

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

要覆盖当前状态数据，我们只需将状态设置为allready现有属性。如果该属性不存在，则会将新属性添加到状态中。

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

import React, { useState } from 'react';

Answer 3

不能在功能组件内部使用setState。为此，必须使用react钩子的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

为了将来，请确保您了解此代码中使用的是功能组件。功能组件是无状态组件。这就是为什么您会收到有关要定义的状态的错误的原因。如果您打算使用状态，请使用用作有状态组件的类组件。使用类组件，您可以通过在渲染方法之前使用接受“ props”作为参数的构造函数来设置初始状态。要使此代码正常工作，请将此功能组件切换为类组件，然后在构造函数中定义初始状态。

反应箭头功能组件-setState未定义

4 个答案: