在不使用 class 组件的情况下动态添加功能组件

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

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

Answer 1

尽量不要推动当前状态，所以改变这个：

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

对此：

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

在不使用 class 组件的情况下动态添加功能组件

Add functional component dynamical in react with out using class component

reactjs

react-functional-component