Question

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

主要思想是
有一个包含一些名称的列表，当用户单击它时，下面的卡组件
用名称和输入字段（值设置为name）两件事呈现

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

状态包含所有名称，通过单击添加按钮，更多名称将添加到列表（状态）。
还有另一种状态可以跟踪当前人。
每个名称都呈现为一个按钮（DOM_persons）。单击此人后，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;

这是卡的组成部分
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>
    )
}

Answer 1

您的组件取决于不同的状态。您的卡组件可以是无状态的组件，而只是接受传递给它的组件。当您在Card组件中使用内部状态时，它会使用Jerry第一次使用正确的值呈现它，但是不会传递对currentPerson中的状态所做的连续更改向下，因为它不是由您的父组件处理的。

父组件

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

卡组件

function Card({name ,handleChange}){

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

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

Answer 2

尝试了一段时间后，谢谢您的支持

（回答我自己的问题很奇怪。?）

说明

一次创建卡组件内部的状态（卡组件未卸载），因此当道具更改并传递到卡组件时不会影响卡组件的状态，因为状态已经创建。
现在，我要解决此问题，是添加了一个useEffect钩子来跟踪道具。因此，当道具更改时，卡的状态会更新。 Kinda为每个人提供单独的输入字段。

代码

import React ,{useState ,useEffect} from 'react'

export default function Card({name}){

    const [value,changeValue] = useState(name)

    useEffect(()=>{
        changeValue(name)
    },[name])

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

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

反应输入字段未重新渲染/刷新

2 个答案: