javascript - 重构以使函数可通过 setState 重用

标签 javascript reactjs

我需要使这个函数可重用,但我不明白如何传递 setState 使其在其中可用

function getRandomEmployee(updateStateFn){
      const filteredEmployee = employeeList.filter(image => image.hasImage === true)
      const random = filteredEmployee[Math.floor(Math.random() * filteredEmployee.length)]
      const randomOpt1 = filteredEmployee[Math.floor(Math.random() * filteredEmployee.length)]
      const randomOpt2 = filteredEmployee[Math.floor(Math.random() * filteredEmployee.length)]
      const randomOpt3 = filteredEmployee[Math.floor(Math.random() * filteredEmployee.length)]
      const randomOptions = [random.fullName, randomOpt1.fullName, randomOpt2.fullName, randomOpt3.fullName]
      randomOptions.sort(() => { return 0.5 - Math.random() })
    setState(state => {
      const newState = updateStateFn && updateStateFn(state)
      return {...newState, randomEmployee: random, randomOptions: randomOptions, playerIsWin:'', disableFieldset: false}
    })
  }

我希望该函数输出随机 4 个名称并在 setState 上返回新状态

最佳答案

我会让这个函数变得纯粹,并在您需要生成这些随机名称时使用它,例如

class SomeComponent extends Component {
    handleClick = () => {
        const {random, randomOptions} = getRandomEmployee()
        this.setState({
           randomOptions,
           random,
        })
    }
}

关于javascript - 重构以使函数可通过 setState 重用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54502711/

相关文章:

javascript - 如何更改 Antd 表中的字体大小

javascript - 谷歌图表的区域设置语言不起作用

javascript - 隐式事件对象传入错误事件监听器

javascript - 如何在网络中托管 Ionic 应用程序?

javascript - React-native 测试用例失败

javascript - 通过蓝牙连接设备

javascript - 有哪些学习 JavaScript 和编程架构的好网站?

javascript - JQuery 的 .load() 导致 HTML 结构错误

mysql - 循环查询在 Node js 中 Sequelize

javascript - 使用 setState() 使用 API 中的数据更新 View - ReactJS