React状态同步问题：点击联系人按钮后contact未随selectedId更新

你的问题核心是类型不匹配导致的：

按钮的value属性会自动将传入的数字转为字符串类型，而你的contact.id是数字类型。当你用===做全等比较时，字符串和数字永远不相等，所以contactList.find((c) => c.id === selectedId)始终找不到匹配项，contact自然不会更新。

两种解决办法： #

1. 把按钮值转为数字

在handleButtonClick里将e.target.value转换为数字类型：

function handleButtonClick(e) {
    e.preventDefault()
    setSelectedId(Number(e.target.value));
}

2. 直接传递id参数（更推荐）

不用依赖按钮的value属性，直接在点击事件里传入contact.id：
修改ContactList组件：

export default function ContactList({ handleButtonClick, contacts }) {
  return (
    <div className="contact-buttons">
      {contacts.map((contact) => {
        return (
          <button
            key={contact.id}
            className="personName"
            onClick={() => handleButtonClick(contact.id)}
          >
            {contact.name}
          </button>
        );
      })}
    </div>
  );
}

然后更新父组件的handleButtonClick：

function handleButtonClick(id) {
    setSelectedId(id);
}

补充说明 #

setSelectedId确实会触发组件重渲染，但因为全等比较的类型不匹配，find方法无法定位到新选中的联系人，才导致contact看起来没有更新。解决类型匹配问题后，状态更新就能正常驱动contact的更新了。

内容的提问来源于stack exchange，提问作者Crehera