如果密钥保持不变，如何重新报告，但其他值会发生变化？

Question

我正在写一个React应用程序。我有一张联系人表：

// ... pure functional component that gets the contacts via props
return (
  <Paper>
    <table>
      <thead>
        <tr>
          {fields.map(renderHeaderCell)}
        </tr>
      </thead>
      <tbody>
        {contacts.map(renderBodyRow)}
      </tbody>
    </table>
  </Paper>
);

renderBodyRow()函数如下所示：

const renderBodyRow = contact => (
  <ContactRow
    key={contact.id}
    contact={contact}
    handleContactSave={handleContactSave}
 />
);

现在，当我更新联系人并且未对表进行排序时，联系人会向下移动列表的底部。但是，不是使用更新的名称进行渲染，而是使用旧名称进行渲染。我认为这是因为contact.id键不会改变。如何获取行以呈现新值？

为了完整起见（并且因为它可能导致问题），这里是ContactRow组件。我认为问题不在于此

import PropTypes from 'prop-types';
import { equals, includes, map } from 'ramda';
import React, { useState } from 'react';

import { fields, groups, tendencies } from '../../config/constants';
import strings from './strings';

function ContactRow({ contact: original, handleContactSave }) {
  const [contact, setContact] = useState(original);
  const disabled = equals(contact, original);

  const handleSaveButtonClick = () => {
    handleContactSave(contact);
    setContact(original)
  };

  const handeCancelButtonClick = () => {
    setContact(original);
  };

  const renderOption = value => (
    <option key={`${contact.id}-${value}`} value={value}>
      {strings[value]}
    </option>
  );

  const renderBodyCell = key => {
    const value = contact[key];
    const testId = `contact-${key}${
      contact.id === 'new-contact' ? '-new-contact' : ''
    }`;
    const handleChange = e => {
      e.preventDefault();
      setContact({ ...contact, [key]: e.target.value });
    };
    return (
      <td key={`${key}-${contact.id}`}>
        {includes(value, [...groups, ...tendencies]) ? (
          <select value={value} data-testid={testId} onChange={handleChange}>
            {includes(value, groups)
              ? map(renderOption, groups)
              : map(renderOption, tendencies)}
          </select>
        ) : (
          <input value={value} data-testid={testId} onChange={handleChange} />
        )}
      </td>
    );
  };

  return (
    <tr>
      <td>
        <button
          aria-label={
            contact.id === 'new-contact' ? 'create-contact' : 'update-contact'
          }
          onClick={handleSaveButtonClick}
          disabled={disabled}
        >
          <span role="img" aria-label="save-icon">
            💾
          </span>
        </button>
        <button
          aria-label={
            contact.id === 'new-contact'
              ? 'cancel-create-contact'
              : 'cancel-update-contact'
          }
          disabled={disabled}
          onClick={handeCancelButtonClick}
        >
          <span role="img" aria-label="cancel-icon">
            🔄
          </span>
        </button>
      </td>
      {map(renderBodyCell, fields)}
    </tr>
  );
}

ContactRow.propTypes = {
  contact: PropTypes.shape({
    /* fields */
  }),
  handleContactSave: PropTypes.func.isRequired
};

ContactRow.defaultProps = {
  contact: fields.reduce((acc, field) => ({ ...acc, [field]: 'N/A' }), {}),
  handleContactSave: () => {
    console.warn('No handleContactSave() function provided to ContactRow.');
  }
};

export default ContactRow;

Answer 1

好的，我现在就看到了。你传递给renderBodyCell的唯一道具是key，没有其他道具。这是不好的做法（而且是错误的）。 keys用作内部优化提示以作出反应，不应用于道具。

  const renderBodyCell = key => {
    const value = contact[key];
    const testId = `contact-${key}${
      contact.id === 'new-contact' ? '-new-contact' : ''
    }`;
    const handleChange = e => {
      e.preventDefault();
      setContact({ ...contact, [key]: e.target.value });
    };
    return (
      <td key={`${key}-${contact.id}`}>
        {includes(value, [...groups, ...tendencies]) ? (
          <select value={value} data-testid={testId} onChange={handleChange}>
            {includes(value, groups)
              ? map(renderOption, groups)
              : map(renderOption, tendencies)}
          </select>
        ) : (
          <input value={value} data-testid={testId} onChange={handleChange} />
        )}
      </td>
    );
  };

你需要传入contact（或者我猜想的联系人和密钥，而不是传递密钥，但是我会毫不犹豫地传递密钥，好像它们是有意义的，除非你确切知道你在做什么）。

编辑：从技术上讲，你是对的，行没有重新渲染，因为密钥没有改变，但那是因为你不应该使用它作为道具。

编辑＃2：你有时间去探索React的工作原理。这是一台非常优化的机器。它不仅仅是在需要的时候一直重新渲染组件。为了找出它何时需要重新渲染它们，它会检查道具和状态（或者，在你的情况下，你在功能上做这个，只是道具 - 函数参数）并将它们与上次组件的道具进行比较渲染。如果道具是相同的（浅等于），那么反应只是说它拧，我不需要更新，道具是相同的。至少这是PureComponent的行为（功能组件是）。

因此，如果您想要更新某些内容，请确保您传递的道具已更改。