React Arrow Function Component - 未定義setState

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

要在功能組件中使用狀態，我們使用所謂的反應掛鈎。 在你的情況下，這個鈎子看起來像這樣。

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

我們在這里使用數組解構。 第一個值是狀態本身，第二個值是我們用來設置狀態的方法。 在React.useState中我們預先定義了我們的初始狀態。 使用setState，您可以改變我們當前的狀態。

要覆蓋當前狀態數據，我們只需將狀態設置為allready existing屬性。 如果該屬性不存在，則將向該狀態添加新屬性。

當然，因為它必須導入它的鈎子。

import React, { useState } from 'react';

Answer 3

你不能在函數組件中使用setState。為了做到這一點，你必須使用反應鈎子的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

對於將來，請確保您了解在此代碼中使用的是函數組件; 功能組件是無狀態組件。 這就是為什么你得到關於狀態定義的錯誤的原因。 如果您打算使用狀態，那么請使用用作有狀態組件的類組件。 對於類組件，您可以使用在render方法之前接受“props”作為參數的構造函數來設置初始狀態。 要使此代碼有效，請將此函數組件切換為類組件，並在構造函數中定義初始狀態。