Reactjs React重新渲染不必要的组件

我是新手，所以请解释发生这种情况的原因（我想是因为我正在创建对象数组，但我不确定也不知道如何解决这个问题）以及如何解决这个问题

我认为最好是展示代码，而不是谈论代码，因此：

App.js

import { useState } from "react";
import Input from "./Input";

let lastId = 2;

function App() {
  const [inputsValues, setInputsValues] = useState([
    { id: 1, value: "" },
    { id: 2, value: "" },
  ]);

  const handleChange = (e, id) => {
    setInputsValues((prevState) => {
      const newState = [...prevState];
      const index = newState.findIndex((input) => input.id === id);
      newState[index].value = e.target.value;
      return newState;
    });
  };

  const addNewInput = () => {
    setInputsValues((prevState) => {
      const newState = [...prevState];
      newState.push({ id: ++lastId, value: "" });
      return newState;
    });
  };

  return (
    <div className="App">
      <div>
        <button onClick={addNewInput}>Add new input...</button>
      </div>

      {inputsValues.map((input) => (
        <div className="input-wrap">
          <Input
            key={input.id}
            id={input.id}
            value={input.value}
            handleChange={handleChange}
          />
        </div>
      ))}
    </div>
  );
}

export default App;

从“react”导入{useState}；
从“/Input”导入输入；
设lastId=2；
函数App（）{
常量[InputsValue，SetInputsValue]=useState([
{id:1，值：”“}，
{id:2，值：”“}，
]);
常量handleChange=（e，id）=>{
设置输入值（（prevState）=>{
const newState=[…prevState]；
const index=newState.findIndex（（输入）=>input.id==id）；
newState[index].value=e.target.value；
返回新闻状态；
});
};
const addNewInput=（）=>{
设置输入值（（prevState）=>{
const newState=[…prevState]；
push（{id:++lastId，值：“}）；
返回新闻状态；
});
};
返回(
添加新输入。。。
{inputsValues.map（（输入）=>(
))}
);
}
导出默认应用程序；

Input.js

import { useRef } from "react";

const Input = ({ id, value, handleChange }) => {
  const renderAmount = useRef(0);

  return (
    <>
      <div> Rendered: {renderAmount.current++}</div>
      <input
        id={id}
        type="text"
        value={value}
        onChange={(e) => handleChange(e, id)}
      />
    </>
  );
};

export default Input;

从“react”导入{useRef}；
常量输入=（{id，value，handleChange}）=>{
const renderAmount=useRef（0）；
返回(
呈现：{renderAmount.current++}
handleChange（e，id）}
/>
);
};
导出默认输入；

---

谢谢

似乎您只需将输入组件包装在

备忘录

中，这样它只有在道具更改时才会重新播放。因此，我在顶部导入了memo函数，并在赋值的右侧调用它，这样它就“包装”了您的组件，并使其成为memo

从“react”导入{useRef，memo}；
const Input=memo（{id，value，handleChange}）=>{
const renderAmount=useRef（0）；
返回(
呈现：{renderAmount.current++}
handleChange（e，id）}
/>
);
});
导出默认输入如何修复什么？有什么问题？为什么会导致组件重新渲染的问题？你的程序有什么问题吗？@AnthonyGarcia Labiad当另一个
输入
组件的
值发生变化时，如何修复其他
输入
组件的重新渲染。为什么？因为我想知道如何处理这种情况，因为它的状态发生了变化<代码>输入
重新加载，因为它的属性发生了更改（至少每个应用程序重新加载程序上都新增了
handleChange
）。也就是说，
key={input.id}
位于错误的元素上。应该是
@Yoshi谢谢，我已经将
键
从
Input
更改为
div
的属性。至于正在更改的
手柄更改
。。。到底是什么让它发生了变化？这不是同样的功能吗？那么我该如何解决这个问题呢？它的变化是因为它存在于
App
中，它的状态会发生变化。因此，在每次渲染时，它都是一个新函数。您可以将
useCallback
与Ulrich的答案结合使用。类似这样的情况：也许我做错了什么，但实际上我以前试过，现在又试了一次，这仍然会在其他
输入发生变化时重新启动它们。你需要用
useCallback
包装你的
handleChange
，这样它在渲染调用之间也会被记忆，并且不会改变：
const handleChange=useCallback（（e，id）=>{…}，[]）
谢谢你，它确实很有用！可以把这个问题标记为已接受的答案吗？当然可以，谢谢！