如何在React的return中显示其他函数返回的JSX？天气应用代码问题

看起来你遇到的核心问题是 Result组件一闪而过甚至根本不显示，这是因为你在渲染逻辑里调用了会修改状态的函数，触发了不必要的重渲染循环，同时状态更新的异步特性也让你的逻辑不符合预期。

为什么你的代码会出问题？ #

1. render函数里的副作用：你在return()的条件渲染中调用changeCity()，而这个函数里执行了setCityEmpty(false)——这会直接修改组件状态，触发重新渲染。当cityEmpty变为true时，渲染changeCity()，它立刻把cityEmpty改回false，下一次渲染时条件不满足，Result就被卸载了，所以你看不到它。
2. 异步状态更新：在Search组件的handleSubmit里，你调用setCityEmpty(true)后立刻console.log(cityEmpty)，会输出原来的false，因为React的状态更新是异步批量处理的，不会立刻生效。

修正方案：简化状态逻辑，避免render中的副作用 #

我们可以调整状态管理的方式，让逻辑更清晰，同时符合React的渲染规则。

方案一：用独立状态保存要显示的城市（推荐）

这种方式直接用一个状态存储需要传递给Result的城市名，逻辑更直观：

修改App组件：

import React, {useState} from 'react';
import Result from "./components/Result";
import Search from "./components/Search";
import './App.css';

function App() {
  const [cityInput, setCityInput] = useState("");
  const [targetCity, setTargetCity] = useState(null); // 存储要查询的城市

  // 处理表单提交逻辑
  const handleSearchSubmit = () => {
    if (cityInput.trim()) { // 先判断输入是否为空
      setTargetCity(cityInput);
      setCityInput(""); // 清空输入框
    }
  }

  return (
    <div className="App">
      <Search 
        city={cityInput} 
        setCity={setCityInput} 
        onSubmit={handleSearchSubmit} 
      />
      {/* 当targetCity有值时渲染Result */}
      {targetCity && <Result city={targetCity} />}
    </div>
  );
}

export default App;

修改Search组件：

import React from "react"

function Search({city, setCity, onSubmit}){
  const handleInputChange = (e) => {
    setCity(e.target.value);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(); // 调用父组件传过来的提交逻辑
  }

  return(
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          placeholder="Insert city" 
          value={city} 
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

export default Search

方案二：保留cityEmpty状态，增加手动关闭逻辑

如果你想保留原有的状态命名，可以调整逻辑，让cityEmpty仅控制显示，把状态修改的逻辑移到Result的关闭操作中：

修改App组件：

import React, {useState} from 'react';
import Result from "./components/Result";
import Search from "./components/Search";
import './App.css';

function App() {
  const [city, setCity] = useState("");
  const [cityEmpty, setCityEmpty] = useState(false);

  // 关闭Result的逻辑
  const closeResult = () => {
    setCityEmpty(false);
  }

  return (
    <div className="App">
      <Search 
        city={city} 
        setCity={setCity} 
        setCityEmpty={setCityEmpty} 
      />
      {cityEmpty && <Result city={city} onClose={closeResult} />}
    </div>
  );
}

export default App;

修改Search组件的handleSubmit：

const handleSubmit = (e) => {
  e.preventDefault();
  if (city.trim()) { // 确保输入不为空再触发显示
    setCityEmpty(true);
    setCity("");
  }
}

给Result组件添加关闭按钮：

// Result.jsx示例
function Result({city, onClose}) {
  // 你的天气数据获取和渲染逻辑
  return (
    <div className="result-container">
      <h2>{city}的天气</h2>
      {/* 其他天气信息 */}
      <button onClick={onClose}>关闭</button>
    </div>
  );
}

export default Result;

关键总结 #

• 永远不要在render函数中调用会修改状态的函数，这会导致无限重渲染或者组件闪烁的问题。
• 状态更新是异步的，不要在调用setState后立刻依赖新的状态值做判断。
• 用清晰的状态来控制组件的显示/隐藏，避免逻辑绕弯。

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