Question

我的聊天应用程序中有两种聊天消息

export const UserType = "USER_MESSAGE";
export const SystemType = "SYSTEM_MESSAGE";
export type ChatType = typeof UserType | typeof SystemType;

我使用switch case来确定我正在处理哪种类型的消息，并根据类型选择呈现其内容。

这是我遇到麻烦的地方，因为根据消息的type，它将包含不同的content对象结构。

const ChatMessages = ({ messages, style }: Input) => {
  // FLOW ERROR: Property `text`: Property not found in object type
  const renderUserMessage = (content: UserContent, i: number) => {
    return <p key={`message-${i}`}>
      <b>{content.userName}: </b>{content.text}
    </p>;
  };
  // FLOW ERROR: Property `info`: Property not found in object type
  const renderSystemMessage = (content: SystemContent, i: number) => {
    return <p key={`message-${i}`}>
      {content.info}
    </p>;
  };
  return (
    <div style={style}>
      {messages.map((message, i) => {
        switch (message.type) {
          case UserType:
            return renderUserMessage(message.content, i);
          case SystemType:
            return renderSystemMessage(message.content, i);
          default:
        }
      })}
    </div>
  );
};

我的其他类型看起来像这样

export type UserContent = {
  userName: string,
  text: string,
};

export type SystemContent = {
  info: string,
};

export type ChatContent =
  UserContent |
  SystemContent;

export type MessageType = {
  type: ChatType,
  content: ChatContent,
};

将类型定义从UserContent和SystemContent更改为通用Object可以解决问题，但这并不像我希望的那样严格

Answer 1

这个问题已知issue。有一个解决方案（或解决方法）在Switch语句之前简单地将message.type重新分配给某个变量，或者用适当的if链交换开关。

所以在你的情况下这应该有效：

return (
    <div style={style}>
      {messages.map((message, i) => {
        let messageType = message.type;

        switch (messageType) {
          case UserType:
            return renderUserMessage(message.content, i);
          case SystemType:
            return renderSystemMessage(message.content, i);
          default:
        }
      })}
    </div>
  );

Flow无法使用switch case在对象类型中找到Property

1 个答案: