React点击按钮后无法显示用户输入域名的问题求助

问题根源 #

你在IconButton的onClick回调里直接创建<Search>组件，但React的渲染机制是基于状态驱动的——只有在组件return的JSX中声明的元素才会被渲染到DOM，事件回调里创建的组件实例不会自动挂载。

修复步骤 #

1. 新增状态控制搜索结果显示 #

在App.js里添加一个状态，存储用户点击搜索后的目标域名：

function MyApp({ Component, pageProps, navigation }) {
  const [searchTerm, setSearchTerm] = useState("");
  // 新增：存储点击搜索后的域名
  const [searchedDomain, setSearchedDomain] = useState("");

  // ... 其余代码
}

2. 修改按钮点击逻辑 #

把点击按钮时创建组件的逻辑，改成更新searchedDomain状态：

<IconButton onClick={() => setSearchedDomain(searchTerm)}>
  <SearchOutlined />
</IconButton>

3. 在JSX中根据状态渲染Search组件 #

在页面合适位置（比如实时显示searchTerm的div下方），判断如果searchedDomain有值，就渲染Search组件：

<div>
  <h1>{searchTerm}</h1>
  {/* 根据searchedDomain状态渲染搜索结果 */}
  {searchedDomain && <Search name={searchedDomain} />}
</div>

4. 修正Search组件的命名问题 #

React要求组件名必须大写开头，否则会被识别为原生HTML标签。修改SearchPage.js里的组件名：

// 原代码
function searchResults(props) { ... }
// 修改后
function SearchResults(props) { ... }

export default SearchResults;

同时在App.js中导入时对应修改：

import SearchResults from './SearchPage';
// 渲染时使用<SearchResults name={searchedDomain} />

5. 清理Search组件的冗余状态 #

Search组件里的const [searchTerm, setSearchTerm] = useState("");完全多余，直接使用props传入的name即可：

function SearchResults(props) {
  var style1 = {color: 'blue'};
  var style2 = {marginLeft: '100px'};
  const [domains, setDomains] = useState([]);

  console.log(props.name)
  return(
    <h1>{props.name}</h1>
  )
}

后续扩展（域名可购买查询） #

若要调用API查询域名状态，可在Search组件的useEffect钩子中触发请求，依赖项设为props.name，确保每次传入新域名时自动发起查询：

import { useEffect } from 'react';

function SearchResults(props) {
  const [domains, setDomains] = useState([]);
  const [isAvailable, setIsAvailable] = useState(null);

  useEffect(() => {
    const checkDomainAvailability = async () => {
      if (!props.name) return;
      const response = await fetch(`${API_URL}&s=${props.name}`);
      const data = await response.json();
      // 根据返回数据判断域名是否可购买，示例逻辑
      setIsAvailable(data.isAvailable);
      setDomains(data.Search || []);
    };
    checkDomainAvailability();
  }, [props.name]);

  return(
    <div>
      <h1>{props.name}</h1>
      {isAvailable !== null && (
        <p style={{color: isAvailable ? 'green' : 'red'}}>
          {isAvailable ? '域名可购买' : '域名已被注册'}
        </p>
      )}
    </div>
  )
}

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