ReactJS:Input onChange未更新状态

我遇到了一个问题，

上的

onChange={}

不会通过状态更改值

我有两个组件，组件1将输入值的状态作为道具传递给组件2：

构成部分1：

函数MainContent（）{
常量[inputValue，setInputValue]=React.useState（“”）；
const onChangeHandler=（事件）=>{
setInputValue（event.target.value）；
};
返回(
);
}
导出默认主内容；

组件2：从组件1获取道具数据

const[commsTitle，setCommsTitle]=useState（“”）；
//const[commsTitle，setCommsTitle]=useState（duplicateHubData.data[0]）//不起作用

我不知道如何将

duplicateHubData.data[0]

存储为状态，然后使用onChange更改状态值

这样做不允许我更改输入值：

const DuplicateHubDisplay=（duplicateHubData）=>{
const[commsTitle，setCommsTitle]=useState（duplicateHubData.data[0]）；
返回(
{
setCommsTitle（即目标值）；
}}
值={commsTitle}
className=“输入”
占位符=“事件标题”
/>
);
}
导出默认的重复显示；

---

如果我理解正确，请提前感谢（1）父组件的

inputValue

更新时或（2）在

DuplicateHubDisplay

中的输入值更新时，您希望

DuplicateHubDisplay

的

命令状态更新

问题
DuplicateHubDisplay
被传递一个
数据
道具，其中初始
输入值
状态值为
”
，因此初始
命令
状态也为
”
DuplicateHubDisplay
不“侦听”道具更新，然后更新
commsTitle
状态

const DuplicateHubDisplay = ({ data }) => {
  const [inputValue] = data; // array destructuring assignment
  const [commsTitle, setCommsTitle] = useState(inputValue);

  useEffect(() => {
    setCommsTitle(inputValue);
  }, [inputValue]);

  return (
    <input
      id="duplicatehub-title"
      onChange={(e) => setCommsTitle(e.target.value)}
      value={commsTitle}
      className="input"
      placeholder="Incident Title"
    />
  );
}

解决方案

解决方案2
如果您实际上不需要使用
commsTitle
状态执行任何操作，您可以将
data[0]
指定为输入上的
defaultValue
，并使用
data[0]
值作为React键，这样当值从父级更新时，React将使用新的默认值重新装载/重置输入

const DuplicateHubDisplay = ({ data }) => {
  const [inputValue] = data; // array destructuring assignment

  return (
    <input
      key={inputValue}
      id="duplicatehub-title"
      defaultvalue={inputValue}
      className="input"
      placeholder="Incident Title"
    />
  );
}

constduplicatehubdisplay=（{data}）=>{
常量[inputValue]=数据；//数组解构赋值
返回(
);
}

第三个选项当然应该允许您更新
命令
状态。您正在验证/验证未更新状态的内容或方式？至少在您键入时，您应该在输入中看到更新的状态。第二个组件中的
duplicateHubData
是什么？第三个方法允许我确定更新状态，但是它不包含通过
duplicateHubData.data[0]
提供的数据。不太确定这样的东西是否需要包装在useEffect或其他东西中以便呈现？您能告诉我们什么是
duplicateHubData.data[0]
以及它来自哪里吗？您还可以分享这两个组件片段的关系吗？组件2是否真的
DuplicateHubDisplay
并由其他组件1呈现？正确，DuplicateHubDisplay肯定是组件2，组件1呈现DuplicateHubDisplay并传递这些道具<代码>重复数据。数据[0]

是组件1的输入状态。基本上，我试图将组件1的输入值复制到组件2的输入。第二个方法通过传入

值={duplicateHubData.data[0]}

复制组件1的值，但它不允许我进行编辑。使用state的第三种方法甚至不显示组件1s的输入值，但它允许我更新值。幸运的是，解决方案不起作用，因为“``onChange={（e）=>{setCommsTitle（e.target.value）}}}实际上不允许我对输入值进行更改。在useEffect上执行console.log时，它似乎会重新呈现父元素中设置的任何内容，因此不允许设置新值。我对useEffect进行了一些输入错误，感谢您的解决方案。第一个对我有用

const DuplicateHubDisplay = ({ data }) => {
  const [inputValue] = data; // array destructuring assignment

  return (
    <input
      key={inputValue}
      id="duplicatehub-title"
      defaultvalue={inputValue}
      className="input"
      placeholder="Incident Title"
    />
  );
}