reactjs React：为什么点击“添加”按钮后，输入值未显示在列表中？

k4ymrczo 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(181)

我正在尝试React，并尝试制作一个简单的组件。输入和“添加”按钮。我想在填写输入并单击按钮后得到一个值列表。我可以看到状态正在被填充，但我不明白为什么列表没有被重新呈现。
下面是我的代码https://jsfiddle.net/3hkm2qnL/14/
'const InputWithAddBtn =属性=〉{ const [值，设置值] =React使用状态（''）;

return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.add(value)}>+</button>
    </div>
  );
};

reactjs

来源：https://stackoverflow.com/questions/75270480/react-why-the-input-value-is-not-displayed-in-the-list-after-clicking-on-the-a

1条答案

按热度按时间

fjaof16o1#

问题出在add（）函数中，该函数通过推到原始数组上，不会向组件发出重新呈现的信号。

const add = (value) => {
    initValue.push(value)
    console.log(initValue)
    setValue(initValue)
}

一个可能的解决方案是：

const add = (value) => {
    const newValues = [...initValue, value]
    console.log(newValues)
    setValue(newValues)
}

这将正确触发组件重新呈现。
有关详细信息，请参见https://stackoverflow.com/a/67354136/21048989
干杯

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs React：为什么点击“添加”按钮后，输入值未显示在列表中？

1条答案

相关问题

热门标签

最新问答