React字段比较方法咨询及MUI DataGrid重复Field列显示问题求助

嘿，我来帮你搞定这两个问题👇

根据不同的使用场景，有几种常见的比较方式：

• 基础值比较：如果是字符串、数字这类基础类型的字段，直接用严格相等运算符===（或不等!==）就能比较，比如：

  const { fieldA, fieldB } = props;
  if (fieldA === fieldB) {
    // 字段相等时的逻辑
  }
  

• 复杂对象/数组比较：如果要比较的是嵌套对象或数组，浅比较（比如直接===）只会判断引用是否相同，这时候可以用以下方法：
  • 简单场景下可以用JSON.stringify()把对象转成字符串后比较，但注意这种方法会忽略函数、undefined等特殊值，且对属性顺序敏感；
  • 如果项目里已经用了lodash，可以用_.isEqual()来做深比较，它能处理大多数复杂类型的对比；
  • 也可以自己实现一个简单的深比较函数，递归遍历每个属性逐一对比。
• 表单字段实时比较：比如验证两次输入的密码是否一致，可以在输入的onChange事件里实时对比两个字段的值，示例代码：

  import { useState } from 'react';
  
  function PasswordForm() {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [isMatch, setIsMatch] = useState(true);
  
    const handlePasswordChange = (e) => {
      const val = e.target.value;
      setPassword(val);
      setIsMatch(val === confirmPassword);
    };
  
    const handleConfirmChange = (e) => {
      const val = e.target.value;
      setConfirmPassword(val);
      setIsMatch(password === val);
    };
  
    return (
      <div>
        <input type="password" value={password} onChange={handlePasswordChange} />
        <input type="password" value={confirmPassword} onChange={handleConfirmChange} />
        {!isMatch && <p style={{color: 'red'}}>两次密码不一致</p>}
      </div>
    );
  }
  

你猜的完全正确！MUI DataGrid要求每一列的field值必须是唯一的，它靠这个标识来区分不同列，所以同名的列会被覆盖，最后只显示最后一个定义的列。

解决方法很简单：给这两个列设置不同的field名称，然后通过valueGetter从details属性里获取对应的数据就行。修改你的列配置代码如下：

const columns = [ 
  { field: 'id', headerName: "ID", minWidth: 50, type:"number", align:'left', hide:'true' }, 
  { field: 'customer', headerName: 'Customer', valueGetter: ({ value }) => value.email, width: 250, }, 
  { field: 'paid', headerName: 'Customer has paid?', width: 250, }, 
  { field: 'total', headerName: 'Cost', width: 150, }, 
  // 给日期列设置唯一field：details-ready-by
  { field: 'details-ready-by', headerName: 'Ready By', type: 'datetime', valueGetter: ({ row }) => row.details.ready_by && new Date(row.details.ready_by), width: 250, }, 
  // 给名称列设置唯一field：details-name
  { field: 'details-name', headerName: 'Name', valueGetter: ({ row }) => row.details[0].name, width: 250, }, 
];

这里要注意，valueGetter的参数里，我们改用row来获取整行数据，因为现在field是新的唯一名称，不再直接对应details字段，所以需要从row.details里提取我们需要的内容。这样修改后，两个列就能正常显示啦。

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