在调用 useState 时更新按钮样式。如何将对象的变量转换为字符串？

Question

我想在单击时更新按钮的样式。

我不能使用 true/false 来更改状态，因为在查询中有 2 个具有相似值的对象.. 所以每当一个被选中时，这两个对象都会改变样式

目前，当点击按钮时没有任何反应，除了 useEffect 在控制台输出正确的值。

这个问题似乎在 const onClick 中，它 returns value in string:
对象 { thisVal: "40", thisIndex: "0" }
对象 { thisVal: "40", thisIndex: 0 }

也许你可以提出一些建议？

          ...

  const [thisButtomSelected, setThisButtomSelected] = useState({
    thisVal: 0,
    thisIndex: 0,
  })
   const onClick = e => {  
    setThisButtomSelected({ thisVal: e.currentTarget.value, thisIndex: e.currentTarget.id });
  }

  useEffect(() => {
    console.log(thisButtomSelected)
  }, [thisButtomSelected])

       ...

  <li id="list" key={item.id}>
    <button
      value={item.value}
      id={index}
      className={isEqual(thisButtomSelected, { thisVal: item.value, thisIndex: index }) 
        ? 'button-selected' : 'button'
      }
      onClick={onClick}
    >
      {console.log(thisButtomSelected)}
      {console.log({ thisVal: item.value, thisIndex: index })}
      {item.displayValue}
    </button>
</li>
    ...

{item.value}、{index}等取自useQuery(apollo-client)，使用了map

Answer 1

给你：

const onClick = e => {  
    setThisButtomSelected({ thisVal: parseInt(e.currentTarget.value), thisIndex: e.currentTarget.id });
  }

在调用 useState 时更新按钮样式。如何将对象的变量转换为字符串？

update of a buttons style on call of useState. how to convert variable of an object to string?

reactjs

apollo-client