javascript - 反应输入字段未重新渲染/刷新(React Input Field not re-rendering/refreshing)

Question

I don't understand why the input field is not refreshing.

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

The main idea is

(主要思想是)
There is a list containing some names and when the user clicks it, the card component below

(有一个包含一些名称的列表，当用户单击它时，下面的卡组件)
is rendered with 2 things the name and an input field ( the value is set to the name )

(用2东西的名字和一个输入字段（值设置为名字）呈现。)

below explains what the code does...

(下面解释了代码的作用...)

The state contains all the names and by clicking the add button more names are added to the list ( which is the state ).

(该状态包含所有名称，通过单击添加按钮，更多名称将添加到列表中（状态）。)
There is another state which keeps the track of the current person.

(还有另一种状态可以跟踪当前人。)
Every name is rendered as a button (DOM_persons).

(每个名称都呈现为一个按钮（DOM_persons）。)

On clicking the person the currentPerson state changes.

(单击人员后，currentPerson状态将更改。)

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;

this is the card component

(这是卡组件)
Card.js

(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>
    )
}

  ask by yasir jafar translate from so

Answer 1

Your components depend on different states.

(您的组件取决于不同的状态。)

Your card component can be a stateless one and just take of what is being passed down to it.

(您的卡组件可以是无状态的组件，而只是接受传递给它的组件。)

When you are using an internal state in the Card component it does render it with the correct value for the first time with Jerry however the consecutive changes made to the state in currentPerson is not handed down since it is not handle by your parent component.

(当您在Card组件中使用内部状态时，它会使用Jerry第一次使用正确的值呈现该状态，但是不会传递在currentPerson对状态进行的连续更改，因为它不是由您的父组件处理的。)

Parent Component

(父组件)

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 handleChange(e){
        changeCurrnetPerson(e.target.value)
    }

  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} handleChange={handleChange}/>
      <button onClick={addItem}>add</button>
    </div>
  );
}

Card Component

(卡组件)

function Card({name ,handleChange}){

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

This way changes made in your parent component will be reflected in your child component since it is a dependency of the parent component.

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