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

Question

我试图在箭头函数组件中使用setState，但是会出现错误“setState未定义”。

我尝试在handleChange中使用setState({selectedSlot})和this.setState({ selectedSlot })来设置状态，但都没有起作用。

 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>
 );
};

- Raghav

---

请阅读有关无状态组件和有状态组件的内容。您可以使用钩子或类来创建没有状态的组件。 - Petrashka Siarhei

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>
 );
};

- Dupocas

Answer 2

在函数式组件中，你不能使用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>
 );
};

- surazz14

Answer 3

为了在函数组件中使用状态，我们使用所谓的React Hooks。在您的情况下，这个Hook可能看起来像这样。

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

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

要覆盖当前状态数据，我们只需将状态设置为已存在的属性即可。如果该属性不存在，则会向状态添加新属性。

当然，由于它是一个钩子，必须导入它。

import React, { useState } from 'react';

- Kevin.a

Answer 4

未来，请确保您理解您在此代码中使用的是函数组件；函数组件应该是无状态组件。这就是为什么会出现关于没有定义状态的错误。如果您计划使用状态，则应使用类组件，它们用作有状态组件。使用类组件，您可以通过在渲染方法之前使用接受“props”作为参数的构造函数来设置初始状态。要使此代码工作，请将此函数组件切换为类组件，并在构造函数中定义初始状态。

- albert_anthony6