反应按钮单击事件更新状态值但不反映在按钮文本上

Question

仍在学习 React 的一些技巧。

我在呈现按钮列表的地方有以下代码：

import React, { useState, useEffect } from 'react';
const MyComponent = (props) => {
  const [buttonList, setButtonList] = useState([]);
  useEffect(() => { getButtonList()}, [])

  const getButtonList = () => {
    let data = [
      {id: 1, name: 'One', selected: false },
      {id: 2, name: 'Two', selected: false },
      {id: 3, name: 'Three', selected: false }
    ]

    setButtonList(data)
  }

  const ButtonItem = ({ item }) => {
    const btnClick = (event) => {
      const id = event.target.value

      buttonList.forEach((el) => {
        el.isSelected = (el.id == id) ? true : false
      })

      setButtonList(buttonList)
      console.log('buttonList', buttonList)
    }

    return (
      <button type="button" 
       className={ "btn mx-2 " + (item.isSelected ? 'btn-primary' : 'btn-outline-primary') }
       onClick={btnClick} value={item.id}>
       {item.name + ' ' + item.isSelected}
      </button>
    )
  }

  return (
    <div className="container-fluid">
      <div className="card mb-3 rounded-lg">
        <div className="card-body">
          {
            buttonList.map(item => (
              <ButtonItem key={item.id} item={item} />
             ))
           }
         </div>
      </div>
    </div>
  )
}

export default MyComponent;

所以按钮呈现：

[ One false ] [ Two false ] [ Three false ]

当我单击任何按钮时，我可以在 Chrome React 工具上看到该按钮的 isSelected 的值变为 true。我还可以确认在状态的开发工具中单击的按钮的特定数组项（在钩子下），值为true。

点击按钮的文本不显示[ One true ] 如果我点击按钮一。我在这里错过了什么？

附：请注意，我还想更改按钮的类，但我认为如果我让按钮 isSelected 值在整个组件中是已知的，那部分将得到解决。

代码演示： https://codesandbox.io/s/laughing-keller-o5mds?file=/src/App.js:666-735

Answer 1

问题：您正在改变状态对象，而不是返回新的状态引用。您曾之前也使用=== 将字符串id 与数字id 进行比较，所有比较都返回false。

解决方案：使用函数更新和array.map通过返回一个新数组来更新状态。

const ButtonItem = ({ item }) => {
  const btnClick = event => {
    const id = event.target.value;

    setButtonList(buttons =>
      buttons.map(button => ({
        ...button,
        isSelected: button.id == id
      }))
    );
  };

  ...
};

建议：分解出btnClick 处理程序，它只需要定义一次。将item 的id 属性库化，这样您就可以使用===。

const btnClick = id => event => {
  setButtonList(buttons =>
    buttons.map(button => ({
      ...button,
      isSelected: button.id === id
    }))
  );
};

更新点击处理程序的附加以传递项目ID

const ButtonItem = ({ item }) => {
  return (
    <button
      type="button"
      className={
        "btn mx-2 " +
        (item.isSelected ? "btn-primary" : "btn-outline-primary")
      }
      onClick={btnClick(item.id)} // <-- pass item.id to handler
      value={item.id}
    >
      {item.name + " " + item.isSelected}
    </button>
  );
};

Answer 2

在您的 btnClick 处理程序中，您正在改变您的状态，您应该创建一个新值并改为分配它：

import React from "react";
import "./styles.css";
import { useState, useEffect } from "react";

const ButtonItem = ({ item, onClick }) => {
  return (
    <button
      type="button"
      className={
        "btn mx-2 " + (item.isSelected ? "btn-primary" : "btn-outline-primary")
      }
      onClick={() => onClick(item.id)}
      value={item.id}
    >
      {item.name + " " + item.isSelected}
    </button>
  );
};

const MyComponent = props => {
  const [buttonList, setButtonList] = useState([]);
  useEffect(() => {
    getButtonList();
  }, []);

  const getButtonList = () => {
    let data = [
      { id: 1, name: "One", isSelected: false },
      { id: 2, name: "Two", isSelected: false },
      { id: 3, name: "Three", isSelected: false }
    ];

    setButtonList(data);
  };

  const btnClick = id => {
    const updatedList = buttonList.map(el => ({
      ...el,
      isSelected: el.id === id
    }));

    setButtonList(updatedList);
    console.log("buttonList", updatedList);
  };

  return (
    <div className="container-fluid">
      <div className="card mb-3 rounded-lg">
        <div className="card-body">
          {buttonList.map(item => (
            <ButtonItem key={item.id} item={item} onClick={btnClick} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default MyComponent;