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，没有其他道具。这是不好的做法（而且是错误的）。 key用作内部优化提示以做出反应，而不应用于道具。

  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（功能组件是）的行为。

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

如果键保持不变，但其他值发生变化，该如何重新呈现？

1 个答案: