创建频道时出现 Stream-Chat 错误：新频道允许使用无效的聊天 ID、字母、数字和“!-_”

Question

我正在尝试按照 YouTube 教程（https://www.youtube.com/watch?v=MJzbJQLGehs）来了解如何在 React 中创建消息应用程序。我即将创建频道，但我不断收到错误消息：

CreateChannel.jsx:45 Error: Invalid chat id  , letters, numbers and "!-_" are allowed
    at new Channel (channel.ts:140:1)

我尝试查看文档，因为我知道自本教程创建以来有些内容已经更新，但我找不到问题。

import React, { useState } from "react";
import { useChatContext } from "stream-chat-react";
import { UserList } from "./";
import { CloseCreateChannel } from "../assets";

const ChannelNameInput = ({ channelName = "", setChannelName }) => {
  const handleChange = (e) => {
    e.preventDefault();
    setChannelName(e.target.value);
  };
  return (
    <div className="channel-name-input__wrapper">
      <p>Name</p>
      <input
        value={channelName}
        onChange={handleChange}
        placeholder="channel-name"
      />
      <p>Add Members</p>
    </div>
  );
};

const CreateChannel = ({ createType, setIsCreating }) => {
  const [channelName, setChannelName] = useState(" ");
  const { client, setActiveChannel } = useChatContext();

  const [selectedUsers, setSelectedUsers] = useState([client.userID] || " ");

  const createChannel = async (e) => {
    e.preventDefault();

    try {
      const newChannel = await client.channel(createType, channelName, {
        name: channelName,
        members: selectedUsers,
      });

      await newChannel.watch();

      setChannelName("");
      setIsCreating(false);
      setSelectedUsers([client.userID]);
      setActiveChannel(newChannel);
    } catch (error) {
      console.log(error);
    }
  };
  
  return (
    <div className="create-channel__container">
      <div className="create-channel__header">
        <p>
          {createType === "team"
            ? "Create a New Channel"
            : "Send a Direct Message"}
        </p>
        <CloseCreateChannel setIsCreating={setIsCreating} />
      </div>
      {createType === "team" && (
        <ChannelNameInput
          channelName={channelName}
          setChannelName={setChannelName}
        />
      )}
      <UserList setSelectedUsers={setSelectedUsers} />
      <div className="create-channel__button-wrapper" onClick={createChannel}>
        <p>
          {createType === "team" ? "Create Channel" : "Create Message Group"}
        </p>
      </div>
    </div>
  );
};

export default CreateChannel;

Answer 1

该错误表明频道的命名似乎包含不允许的字符。 由于错误消息指出仅允许使用以下类型的字符：

• 字母
• 数字
• 字符 !、- 和 _

在

CreateChannel

中，您将

channelName

初始化为带有空白空间 (

string

) 的

" "

。根据

ChannelNameInput

组件中设置的值，可能存在一个名称集，其中包含不允许的字符。

您可以检查一下并看看是否可以解决问题吗？

Answer 2

我不确定您是否仍然面临这个问题，但我会将其留在这里，以防其他人遇到同样的问题。问题是 Stream 在为聊天提供自定义名称时不允许空格。例如，如果您想将聊天命名为“Hello world”，则不应在“Hello”和“world”之间添加空格。相反，您应该将它们结合起来以确保始终如此。你可以这样做：假设你在创建聊天之前有一个 chatName 状态，使用

const trimmedChatName = chatName.replace(/ /g, '');

这将确保删除所有空格。 希望这有帮助。