Javascript 反应输入字段未重新呈现/刷新

我不明白为什么输入字段没有刷新。

主要思想是
有一个包含一些名称的列表，当用户单击它时，下面的卡片组件将显示出来
使用名称和输入字段（该值设置为名称）这两个内容呈现

下面解释了代码的作用…

该状态包含所有名称，单击“添加”按钮可将更多名称添加到列表（即状态）。
还有另一个状态可以跟踪当前人员。
每个名称都呈现为一个按钮（DOM_persons）。 单击人员后，当前人员状态将更改

import React , {useState} from 'react';
import './App.css';
import Card from './Card';

function App() {

  const [state,changeState] = useState(['Jerry'])
  const [currentPerson,changeCurrnetPerson] = useState(state[0])

  function addItem(){
    const names = ['Karren','Jesus','Wilfredo','Samuel','Chi','Kellye','Kazuko','Mae','Olevia','Ines']
    const newState = [...state]
    newState.push(names[Math.floor(Math.random()*names.length)])
    changeState(newState)
  }

  function changePerson(i){
    changeCurrnetPerson(state[i])
  }

  const DOM_persons = state.map((p,i) => <button key={i} onClick={()=>{changePerson(i)}} >{p}</button> )

  return (
    <div className="App">
      {DOM_persons}
      <Card name={currentPerson}/>
      <button onClick={addItem}>add</button>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
导入“/App.css”；
从“./卡”导入卡；
函数App（）{
const[state，changeState]=useState（['Jerry']）
const[currentPerson，changeCurrentPerson]=useState（状态[0]）
函数addItem（）{
const names=['Karren'、'Jesus'、'Wilfredo'、'Samuel'、'Chi'、'Kellye'、'Kazuko'、'Mae'、'Olevia'、'Ines']
const newState=[…state]
newState.push（名称[Math.floor（Math.random（）*names.length）]）
变更状态（新闻状态）
}
职能转变人（一）{
ChangeCurrentPerson（状态[i]）
}
const DOM_persons=state.map（（p，i）=>{changePerson（i）}>{p}）
返回(
{DOM_persons}
添加
);
}
导出默认应用程序；

这是卡组件
Card.js

import React ,{useState} from 'react'

export default function Card({name}){

    const [value,changeValue] = useState(name)

    function handleChange(e){
        changeValue(e.target.value)
    }

    return(
        <div>
            <h4>{name}</h4>
            <input value={value} onChange={handleChange}/>
        </div>
    )
}

import React，{useState}来自“React”
导出默认功能卡（{name}）{
const[value，changeValue]=useState（名称）
功能手柄更改（e）{
更改值（如目标值）
}
返回(
{name}
)
}

您的组件取决于不同的状态。您的卡组件可以是无状态的组件，只需获取传递给它的内容即可。当您在

卡

组件中使用内部状态时，它确实第一次使用

Jerry

以正确的值呈现它，但是对

currentPerson

中的状态所做的连续更改不会传下来，因为它不是由您的父组件处理的

父组件

函数应用程序（）{
const[state，changeState]=useState（['Jerry']）
const[currentPerson，changeCurrentPerson]=useState（状态[0]）
函数addItem（）{
const names=['Karren'、'Jesus'、'Wilfredo'、'Samuel'、'Chi'、'Kellye'、'Kazuko'、'Mae'、'Olevia'、'Ines']
const newState=[…state]
newState.push（名称[Math.floor（Math.random（）*names.length）]）
变更状态（新闻状态）
}
功能手柄更改（e）{
ChangeCurrentPerson（如目标值）
}
职能转变人（一）{
ChangeCurrentPerson（状态[i]）
}
const DOM_persons=state.map（（p，i）=>{changePerson（i）}>{p}）
返回(
{DOM_persons}
添加
);
}

卡组件

功能卡（{name，handleChange}）{
返回(
{name}
)
}

---

这样，在父组件中所做的更改将反映在子组件中，因为它是父组件的依赖项。

经过一段时间的实验，我得到了它，感谢您的支持

---

（回答我自己的问题很奇怪。在您的卡组件中，您没有更新原始状态。换句话说，卡组件不会将任何内容发送回您的应用组件。您不需要在卡组件中创建新状态。您可以将handleChange处理程序向上移动到应用组件，并将其作为回调传递给卡组件。该n在应用程序组件中向上接收输入值，然后使用该值进行操作。卡组件是一个虚拟组件。卡组件中的状态与主应用程序组件无关。主要问题是为什么卡组件接收到新道具时输入字段未更新。h4已更新，但未更新输入FieldCard组件可以是功能组件。您可以从父组件将changeinputfield函数传递给card组件。因为h4的值来自{name}道具，但input没有！input的值和onChange处理程序位于您的卡组件中。为什么要管理

卡组件中的状态？您可以传递处理程序（以从
输入中接收新值）而
App
组件的
input
值作为道具。
App.js
应该是（单个）真相来源。谢谢你的回答，但这不是我想要的，卡片组件只是一个虚拟的，只呈现2个东西和h2以及一个包含人名的输入字段，卡片组件的状态与应用程序组件无关。更改输入字段除了更改其值外，什么都做不了。