更改选项卡项时组件不会重新呈现以做出反应

Question

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

实际上，我正在使用条件开关显示内容，return 聊天内容取决于点击的选项卡项目。

这里是切换条件

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

我的实际问题是，当我 select 选项卡 2 或 3 时聊天内容没有改变（作者姓名在最后一个选项卡 selected selecting tab 1 )

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

如何通过不断向聊天添加新消息来使选项卡更新聊天内容？

Answer 1

如果您 'reusing' 同一组件 [树] 用于不同的数据，您应该使用不同的 key 来强制重新呈现整个结构：

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

更改选项卡项时组件不会重新呈现以做出反应

Component does not rerender in react when changing tab item

javascript

reactjs

office-ui-fabric

office-ui-fabric-react