将 React Class 组件转换为函数组件

Question

我一直在尝试将以下代码从 React Class 组件转换为函数组件，但自从出现错误“Expected an assignment or函数调用，而是看到一个表达式。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])

Answer 1

在功能组件语法中，您可以直接传递新状态，或者如果您需要访问以前的状态，则使用函数语法，但是状态变量不可分配，所以当您这样做时：

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

将 React Class 组件转换为函数组件

Converting a React Class Component to a Function Component

components

class

function

reactjs