更改选项卡项时组件不会重新渲染

Question

我会使用fluent ui for react 进行动态标签聊天。

实际上，我使用条件开关显示内容，该开关根据点击的标签项返回聊天内容。

这是切换条件

let switchTasks = (type, data) => {
  switch (type) {
    case "people":
      return <p>{data.content}</p>; // send basic text
    case "chat":
      return <ChatExample infos={data} />; // send component chat.
    default:
      break;
  }
};

在我的聊天组件中，我设置了一个使用初始聊天内容（应该来自状态）初始化的状态，然后每次添加消息时都会更新。

const ChatExample = props => {
  const [inputValue, setInputValue] = React.useState("");
  const items = [
    {
      message: (
        <Chat.Message
          content="Hello"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
        />
      ),
      contentPosition: "end",
      attached: "top",
      key: "message-id-1"
    },
    ...
  ];
  const [itemsChat, setItemsChat] = React.useState(items);

  const handleKeyDown = event => { // to add messages to chat.
    if (event.key == "Enter") {
      let elm = {
        message: (
          <Chat.Message
            content={inputValue}
            author="John Doe"
            timestamp="Yesterday, 10:15 PM"
            mine
          />
        ),
        contentPosition: "end",
        attached: "top",
        key: "message-id-1"
      };
      setItemsChat(itemsChat => [...itemsChat, elm]);
      setInputValue("");
    }
  };
  return (
    <div>
      <Chat items={itemsChat} />
      <ItemLayout
        content={
          <Input
            value={inputValue}
            onKeyDown={event => handleKeyDown(event)}
            onChange={event => setInputValue(event.target.value)}
            fluid
            clearable
            placeholder="Message..."
          />
        }
      />
    </div>
  );
};

这是demo of issue

我的实际问题是，当我选择选项卡 2 或 3 时，聊天内容没有改变（作者姓名表示选择tab 1 后选择的最后一个选项卡）

当我将 <Chat items={itemsChat} /> 替换为 <Chat items={items} /> 时，它确实会改变内容，但在这种情况下，我将无法向聊天添加消息（itemsChat 代表 items + 新消息）

如何通过不断向聊天中添加新消息来使标签更新聊天内容？

Answer 1

如果您为不同的数据“重用”相同的组件 [树]，您应该使用不同的 key 来强制重新呈现整个结构：

return <ChatExample infos={data} key={data.content}  />;