Question

我正在创建一个包含名为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 && updates.errors.partTimePercentageShare
            //   && 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>
  );
};

由于我切断了一些代码，所以可能看起来像语法错误，但是没有。该代码可以完美运行并且不会中断。

子组件不会重新渲染，并且从不打印控制台日志

0 个答案: