请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

先上代码

1 实现一个队列

queue.js

class Queue {
  constructor(que){
    this.que = que || []
  }
  push = (value) => {
    this.que.push(value)
  }
  shift = () => {
    this.que.shift()
  }
   // 获取队列第一位元素
  peek = () => {
    return this.que.length > 0 ? this.que[0] : null 
  }
}
export default new Queue()

2.用react hooks 实现任务组件

Task.js

import React,{useState,useEffect} from 'react'
import deepClone from '../../util/deepClone'
const Task = (props) => {
  const [value, setValue] = useState('')
  const [taskList,setTaskList] = useState([])

  const inputChange = (v) => {
    setValue(v)
  }
  const addTask = () => {
      const tmp = taskList
      tmp.push({value})
      setTaskList(tmp)
      setValue('')
  }
  const finshTask = () => {
    const tmp = deepClone(taskList)
    tmp.shift()
    setTaskList(tmp)
  }
  return(
    <>
      <input value={value} onChange={(e) => inputChange(e.target.value)}/>
      <button onClick={addTask}>增加一条任务</button>
      <button onClick={finshTask}>完成一条任务</button>
      <ol>
        {taskList.length> 0 ? taskList.map((item,key) => {
          return( <li key={key}>{item.value}</li>)
        }) : null}
      </ol>
    </>
  )
}
export default Task

deepclone.js

const deepClone = (obj) => {
  if(typeof obj !== 'object'){
    return obj
  }
  let result
  if (obj instanceof Array) {
    result = []
  }else{
    result = {}
  }
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      result[key] = deepClone(obj[key])
    }
  }
  return result
}
export default deepClone

效果图

图片描述
图片描述

过程中遇到的问题

  1. 我想在 Task.js 中的useState() 用我自己定义的那个队列,但会报push()等方法undifined
  2. 如果Task.js 里 finishTask 不使用深拷贝,就不会触发渲染,不理解为什么。

添加回答

1回答

  • 变量修改完,再用 usestate 生成的方法来设置,不要直接操作

    2020-10-13 10:24:25

JavaScript版数据结构与算法 轻松解决前端算法面试

难度中级
时长15小时
人数804
好评度99.4%

夯实算法基础,填补技术短板,助力面试考题最后一公里

讲师

lewis Web前端工程师

曾就职于奇虎360、中科院计算所,现任BAT资深工程师,在React、Node.js、人工智能等领域具有丰富的开发经验。讲课深入浅出、旁征博引,极具个人风格。

意见反馈 帮助中心 APP下载
官方微信