使用类组件添加动态内反外的功能组件

Question

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

这是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]);