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

【问题标题】：Add functional component dynamical in react with out using class component在不使用类组件的情况下动态添加功能组件
【发布时间】：2022-01-27 10:27:29
【问题描述】：

我正在尝试列出应该在 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

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

【问题讨论】：

标签： reactjs react-functional-component

【解决方案1】：

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

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

到这里：

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

【讨论】：

这是一个简单而有用的解决方案，谢谢。