React中修改chatroomName后，如何触发App组件的渲染更新？

核心原因是chatroomName的状态没有在App组件层面管理，React组件只有自身状态变化时才会触发重新渲染，你在ChatRoomName里修改的变量如果不属于App的状态，App根本感知不到变化，自然不会更新渲染结果。

解决步骤如下：

1. 把chatroomName的状态提升到App组件中，用useState声明并管理：

import { useState } from 'react';

function App() {
  const [user, setUser] = useState(null); // 保留你原有user状态逻辑
  const [chatroomName, setChatroomName] = useState(null); // 把chatroomName作为App的状态

  return (
    <section>
      {!user ? 
        <SignIn /> : 
        (chatroomName !== null ? <ChatRoom roomName={chatroomName} /> : <ChatRoomName setChatroomName={setChatroomName} />)
      }
    </section>
  );
}

2. 修改ChatRoomName组件，通过props接收App传递的setChatroomName函数，在输入框内容变化时调用该函数更新状态：

function ChatRoomName({ setChatroomName }) {
  return (
    <input
      type="text"
      onChange={(e) => setChatroomName(e.target.value)}
      placeholder="输入聊天室名称"
    />
  );
}

这样操作后，当你在ChatRoomName的输入框输入内容时，会触发App组件的状态更新，App检测到chatroomName变化后会重新执行渲染逻辑，三元运算符就会根据最新的chatroomName值自动切换到ChatRoom组件。

内容的提问来源于stack exchange，提问作者Christopher Bartha