Блог

Я создаю таблицу с дочерними компонентами с именами Header и Body. Кажется, что он отображается нормально, но когда я меняю поле ввода, а затем дату в следующем поле, оно стирает значение в первом поле ввода, даже если редуктор отображает корректно в них обоих. Также используется метод onChange, который используется в поле ввода в качестве поддержки, однако журнал консоли в компоненте никогда не запускается. Не при изменении значения и вообще не при первом рендеринге. Ничего из того, что я регистрирую внутри этого файла, не печатается, но если я изменяю заполнитель, он изменяется. Поэтому я уверен, что я в правильном месте. Есть мысли?

Пример кода

 const MemberRow = ({
  intl: { formatMessage, locale }, member, companyId, updates, onBlur, onChange, onRemove, relocateMemberActions, ...rest
}) => {
  const [memberUpdate, setMemberUpdate] = useState(updates);
  useEffect(() => {
    console.log('updates child', updates, memberUpdate);
    if (updates !== memberUpdate) {
      setMemberUpdate(updates);
    }
  }, [updates, member, memberUpdate]);

  const handleOnChangeMember = (e) => {
    console.log('kommer vi hit', member)
    console.log(e)
    const { ssn } = member;
    const { target: { dataset: { attr }, value } } = e;
    relocateMemberActions.updateMember(ssn, { [attr]: value });
  };

return (
  <td>
          <Input
            aria-label={formatMessage(GeneralMessages.workPercent)}
            // status={(updates.errors amp;amp; updates.errors.partTimePercentageShare
            //   amp;amp; updates.errors.partTimePercentageShare[0])}
            placeholder={formatMessage(RelocateMessages.nameOrOrgNumber)}
            on_change={({ value }) => handleOnChangeMember({
              value,
              attr: 'organization',
            })}
            on_blur={onBlur}
            value={updates.organization || null}
          />
        </td>
)
};

const DesktopBody = ({
  members, updates, companyId, ...rest
}) => {
  console.log('desktopBody', companyId, rest);
  useEffect(() => {
  }, [members, updates, companyId, rest]);
  return (
    <tbody>
      {members.map(member => (
        <MemberRow key={member.ssn} {...rest} member={member} companyId={companyId} updates={updates[member.ssn] || {}} />
      ))}
    </tbody>
  );
};

  

Это может выглядеть как синтаксическая ошибка, поскольку я вырезал некоторый код, но это не так. Код выполняется отлично и не ломается.