將React類組件轉換為函陣列件

我一直在嘗試將以下代碼從 React 類組件轉換為函陣列件，但我遇到了問題，因為我得到了錯誤“期望一個賦值或函式呼叫，而是看到一個運算式。eslint no-unused-expressions "

componentDidMount() {
    this.startingSequence();
}


startingSequence = () => {
    setTimeout(() => {
      this.setState(
        () => {
          return {
            textMessageOne: `A wild ${this.state.enemyName} appeared!`,
            enemyFaint: false
          };
        },
        () => {
          setTimeout(() => {
            this.setState(
              {
                textMessageOne: `Go ${this.state.playerName}!`,
                playerFaint: false
              },
              () => {
                setTimeout(() => {
                  this.setState({
                    textMessageOne: ""
                  });
                }, 3000);
              }
            );
          }, 3000);
        }
      );
    }, 1000);
  };

這是我在嘗試將其轉換為函陣列件時得到的代碼：

const startingSequence = () => {
        setTimeout(() => {
            () => {
                setTextMessageOne(state => {
                    state = (`Wild ${enemyName} appeared!`)
                    return state;})
                setEnemyFaint(state => {
                    state = false
                    return state;})
            }
            ,
            () => {
                setTimeout(() => {
                    setTextMessageOne(`Go ${playerName}!`),
                    setPlayerFaint(false)
                    , 
                    () => {
                        setTimeout(() => {
                            setTextMessageOne("")
                        }, 3000);
                    }
                }, 3000);
            }
        }, 1000);
    };

useEffect(() => { 
    startingSequence(); 
}) 

編輯：感謝 Kieran Osgood 的解決方案：

    const startingSequence = () => {
        setTimeout(() => {
          setTextMessageOne(`Wild ${enemyName} appeared!`)
          setEnemyFaint(false)
          setTimeout(() => {
            setTextMessageOne(`Go ${playerName}!`)
            setPlayerFaint(false)
            setTimeout(() => {
            setTextMessageOne('')
            }, 3000)
        }, 3000)
        }, 1000)
    }
    
    useEffect(() => {
        startingSequence()
    }, [enemyFaint])

uj5u.com熱心網友回復：

在功能組件語法中，您可以直接傳遞新狀態，或者如果您需要訪問前一個狀態，則使用函式語法，但是狀態變數不可分配，因此當您這樣做時：

setTextMessageOne(state => {
    state = `Wild ${enemyName} appeared!`
    return state
})

你可以像這樣簡單地做到這一點：

setTextMessageOne(`Wild ${enemyName} appeared!`)

函式語法對于假設一個計數器很有幫助，我們在其中遞增一個數字，并避免使陳舊的閉包相互重疊。

setCounter(previousState => {
    return previousState   1
})
// OR
setCounter(previousState => previousState   1)

所以修改它，另一個問題是有很多嵌套箭頭函式，它們似乎源于之前對 setState 的第二個引數的使用，這是一個在狀態設定后立即執行的回呼 - 這在功能中不存在組件，因此您可能應該將此函式重構為更類似于以下內容

// this is just a basic representation, consider combining these to objects etc.
  const [enemyName, setEnemyName] = React.useState('')
  const [enemyFaint, setEnemyFaint] = React.useState(false)
  const [playerFaint, setPlayerFaint] = React.useState(false)
  const [textMessageOne, setTextMessageOne] = React.useState('')
  const [playerName, setPlayerName] = React.useState('')

  const startingSequence = () => {
    setTimeout(() => {
      setTextMessageOne(state => {
        state = `Wild ${enemyName} appeared!`
        return state
      })
      setEnemyFaint(false)
    }, 1000)
  }

  React.useEffect(() => {
    setTimeout(() => {
      setTextMessageOne(`Go ${playerName}!`)
      setPlayerFaint(false)

      setTimeout(() => {
        setTextMessageOne('')
      }, 3000)
    }, 3000)
  }, [enemyFaint])

然后您希望將這些進一步提取到自定義掛鉤中，以便更清楚您在組件流中的意圖，但通常這是功能組件通過 useEffect 回應狀態更改的方式

標籤：反应 功能 班级 组件

上一篇：匿名遞回函式

下一篇：定義一個拆分資料序列的函式，在新行上列印每個，但不列印特定索引