React结合Mantine组件实现选择姓名后自动匹配显示对应出生日期的问题求助

Hey there! Let's fix this issue together. I see where the problem lies in your code—there are a couple of small mistakes that are preventing the DOB from updating automatically when you select a name. Let's go through the fixes step by step:

First, let's address the key issues in your original code: #

• Variable name conflict: You have a global user array, but you also used const [user, setUser] = useState(); which overwrites that original data. We need to rename this state variable to avoid confusion.
• Incorrect Select component logic: Right now, you're just storing the selected name in state, but not using it to fetch the corresponding DOB. Also, the value prop of the Select was bound to the wrong state variable.
• Date type mismatch: Mantine's DatePicker expects a Date object as its value, but your DOB is a string. We need to convert the string to a Date when setting the birthDate state.

Here's the corrected code: #

import { useState } from 'react';
import { Grid, Select, DatePicker } from '@mantine/core';

// 重命名原数据数组，避免和状态变量冲突
const users = [
  {
    "name": "Gavin",
    "id": 1,
    "DOB": "2007-01-03",
  },
  {
    "name": "Harvey",
    "id": 2,
    "DOB": "1980-11-23",
  }
];

function HeaderSelect() {
  // 跟踪选中的用户名
  const [selectedUserName, setSelectedUserName] = useState('');
  // 存储出生日期（Date对象类型，适配DatePicker）
  const [birthDate, setBirthDate] = useState(null);

  // 处理姓名选择：匹配对应用户并更新出生日期
  const handleNameChange = (selectedName) => {
    setSelectedUserName(selectedName);
    // 根据选中的名字在数组中找到对应用户
    const matchedUser = users.find(user => user.name === selectedName);
    if (matchedUser) {
      // 将字符串类型的DOB转换为Date对象
      setBirthDate(new Date(matchedUser.DOB));
    } else {
      setBirthDate(null);
    }
  };

  return (
    <div style={{ marginTop: 70, marginBottom: 70 }}>
      <Grid>
        <Grid.Col span={3}>
          <Select
            label="Name"
            data={users.map(op => ({
              label: op.name,
              value: op.name,
            }))}
            value={selectedUserName}
            onChange={handleNameChange}
            placeholder="Select a user"
          />
        </Grid.Col>
        <Grid.Col span={3}>
          <DatePicker
            placeholder="Selected DOB"
            label="DOB"
            clearable={false}
            value={birthDate}
            onChange={setBirthDate}
            // 可选：未选择姓名时禁用日期选择，保持数据同步
            disabled={!selectedUserName}
          />
        </Grid.Col>
      </Grid>
    </div>
  );
}

export default HeaderSelect;

关键改进说明： #

1. 重命名数据数组：把原user数组改为users，避免和状态变量命名冲突。
2. 优化状态变量：用selectedUserName跟踪选中的姓名，birthDate存储适配DatePicker的Date对象。
3. 新增处理函数：handleNameChange不仅更新选中姓名的状态，还会自动匹配对应用户的DOB，转换为Date类型后同步到出生日期状态。
4. 可选禁用逻辑：给DatePicker添加disabled属性，未选择姓名时无法手动修改日期，确保数据始终和选中的姓名对应。

试试这段代码，现在选择姓名后，出生日期应该会自动同步显示啦！

备注：内容来源于stack exchange，提问作者Somdotta Sarkar