Question

我正在使用 React/Context API/UseReducer 创建一个基于文本的 rpg，但首先我想练习使用 useState 以便从 onclick 事件渲染对象。到目前为止，我设法从一个数组渲染一个对象，显示的数据由我单击的按钮决定。问题是，每当我渲染一个对象并点击另一个按钮时，新对象都会被渲染，并且前一个对象会更新为我当前单击的对象。

例如，我有 8 个选项可供选择：Weak Strike 1-4、Mid Strike 1-2、Strong Strike 和 Launch Strike。当我单击 Weak Strike 1 时，它会呈现在页面上。当我点击 Midstrike 1 时，它也会在页面上呈现，但是 Weakstrike 1 更改为 Midstrike 1，所以现在我有两个 Midstrike 1。

我需要一种方法来在页面上同时呈现 Weak Strike 1 和 Midstrike，而无需更新彼此匹配。

代码：状态挂钩

const [name, setName] = useState(rpActions.strike)  //Used to set and update a strike action

const [count, setCount] = useState(0)  //Used to add a component after one button click

代码：onClickHandler

const onClickHandler = (e) => {

    setCount(count + 1)
    setName({...name, name: e.target.value})
    console.log(e.target.value)

 }

代码：渲染逻辑

 <button className="w3-button w3-purple" value={name[0].name}  onClick={onClickHandler}>{name[0].name}</button>
      <button className="w3-button w3-purple" value={name[1].name}  onClick={onClickHandler}>{name[1].name}</button>
      <button className="w3-button w3-purple" value={name[2].name}  onClick={onClickHandler}>{name[2].name}</button>
      <button className="w3-button w3-purple" value={name[3].name}  onClick={onClickHandler}>{name[3].name}</button>
      <button className="w3-button w3-purple" value={name[4].name}  onClick={onClickHandler}>{name[4].name}</button>
      <button className="w3-button w3-purple" value={name[5].name}  onClick={onClickHandler}>{name[5].name}</button>
      <button className="w3-button w3-purple" value={name[6].name}  onClick={onClickHandler}>{name[6].name}</button>
      <button className="w3-button w3-purple" value={name[7].name}  onClick={onClickHandler}>{name[7].name}</button>

 
{[...Array(count)].map((_, i) => <BattleSelection key={i} stkName2={name.name} />)}

Answer 1

如果我理解正确，您的 name 变量应该是一个数组而不是一个对象。

您的 BattleSelection 组件读取对象 name，每次单击按钮时都会更新该对象。计数的数量无关紧要，您总是在读取最后点击的值。

另外，因为 rpActions 是一个常量，所以你不需要把它放在一个状态变量上：

const [strikes, setStrikes] = useState([])  //Used to set and update a strike action

// you can also use value here, but maybe your strike object has more attributes that you might need.
const onClickHandler = (newStrike) => {
    setStrikes(_strikes => [..._strikes, newStrike])
    console.log(newStrike)
}

{rpActions.map(d => (
  <button className="w3-button w3-purple" 
    value={d.name}  // not necessary anymore
    onClick={() => onClickHandler(d)}
   >
    {d.name}
   </button>
))}

{strikes.map((d) => <BattleSelection key={d.name} stkName2={d.name} />)}

Answer 2

name 仅存储最近点击的警示。映射数组时，name.name 在每次迭代中都具有相同的值。

相反，您希望拥有罢工历史。创建一个数组并在每次点击时附加一个新项目。

const [names, setNames] = useState([]);

const onClickHandler = (e) => {
setNames([...names, { name: e.target.value }])
}

渲染：

names.map((item, i) => <BattleSelection key={i} stkName2={item.name} />)}

如何在不更新先前渲染的情况下渲染 onClick 事件的不同数据？

2 个答案: