Javascript 组件在更改选项卡项时不会在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;
  }
};

let switchTasks=（类型、数据）=>{
开关（类型）{
案例“人”：
返回{data.content}
；//发送基本文本
案例“聊天”：
return；//发送组件聊天。
违约：
打破
}
};

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

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>
  );
};

const ChatExample=props=>{
常量[inputValue，setInputValue]=React.useState（“”）；
常数项=[
{
信息：(
),
contentPosition:“结束”，
附：“顶部”，
键：“message-id-1”
},
...
];
const[itemsChat，setItemsChat]=React.useState（项目）；
const handleKeyDown=event=>{//向聊天室添加消息。
如果（event.key==“输入”）{
let elm={
信息：(
),
contentPosition:“结束”，
附：“顶部”，
键：“message-id-1”
};
setItemsChat（itemsChat=>[…itemsChat，elm]）；
setInputValue（“”）；
}
};
返回(
setInputValue（event.target.value）}
流体
清晰的
占位符=“消息…”
/>
}
/>
);
};

这里有一个

我的实际问题是，当我选择tab 2或tab 3时，聊天内容不会改变（作者姓名表示在选择

tab 1

后最后选择的tab）

当我将

替换为

时，它确实会更改内容，但在这种情况下，我将无法向聊天室添加消息（

itemsChat

表示

项

+新消息）

---

如何通过不断向聊天室添加新消息来更新聊天室内容？

如果要对不同数据“重用”同一组件[树]，则应使用differnt

键来强制重新提交整个结构：

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

返回；