使用类组件在react中添加动态功能组件

Question

我正在尝试列一个应该在UI中构建的技能列表，在这个步骤中我没有任何问题。但是当我在列表中添加一个新项目时，通过在输入中写入它并点击一个按钮来添加它，控制台会发送一个消息来告诉:技能是不可迭代的。

这是App.js文件中的代码：

import './App.css';
import Skills from './Components/Details'
import React,{useState} from 'react';

function App() {
  const [numApp,reNumApp] = useState(0)
  const [skill,reSkill] = useState('')
  const [skills,reSkills] = useState(['HTML'])
  
  const addSkill = (value)=>{
    let newList = skills.push(value);
    reSkills(newList);
    console.log(skills);
     
  }

  
  console.log(skills)
  return(
    <>
      <h1>Num Of applecation:{numApp}</h1>
      <button onClick={()=>reNumApp(numApp + 1)}>Other Application</button>
      <hr/>
      <input type='text' value={skill} onChange={(e)=>reSkill(e.target.value)}/>
      <button onClick={()=>{addSkill(skill)}}>Add</button>
      <Skills skills = {skills}/>

    </>
    
  )
}

export default App;

这是详细信息文件中的代码：

import React,{useState,Fragment} from 'react';

function Skill({key,value})
{
  const  [count,reCount] = useState(0)
  return(
    <>
      <span><p key={key}>{value} : {count}</p></span>
      <button onClick={()=>reCount(count + 1)}>+</button>
    </>
    
  )
}

function Skills({skills}) {
  return(

    <Fragment>
      {
        [...skills].map((v,i)=>{return <Skill key={i} value={v}/>})
      }
    </Fragment>
  )
  
}


export default Skills

我需要知道如何在不使用类组件的情况下解决这个问题。

Answer 1

尽量不要推到当前状态，所以更改如下：

let newList = skills.push(value);
reSkills(newList);

对此：

reSkills([...skills, value]);