React函数组件间传递useState状态数据：实现跨组件图片展示

要让两个独立的React组件共享状态并实现条件渲染，核心思路是状态提升——把url和fetchSuccess这两个需要跨组件使用的状态，放到它们的共同父组件中管理，再通过props把状态和修改状态的方法传递给子组件。

实现步骤及代码示例 #

1. 创建共同父组件
   父组件负责统一管理状态，并把状态和回调方法传递给两个子组件：

   import ImageLinkForm from './ImageLinkForm';
   import FaceRecognition from './FaceRecognition';
   import { useState } from 'react';
   
   const App = () => {
     const [url, setUrl] = useState("");
     const [fetchSuccess, setFetchSuccess] = useState(false);
   
     // 供ImageLinkForm调用，更新url状态
     const updateUrl = (newUrl) => {
       setUrl(newUrl);
     };
   
     // 供ImageLinkForm调用，标记请求成功
     const markFetchSuccess = () => {
       setFetchSuccess(true);
     };
   
     return (
       <div>
         <ImageLinkForm 
           updateUrl={updateUrl} 
           markFetchSuccess={markFetchSuccess} 
         />
         <FaceRecognition url={url} fetchSuccess={fetchSuccess} />
       </div>
     );
   };
   
   export default App;
   

2. 修改ImageLinkForm组件
   移除自身的状态，通过props接收父组件传递的回调，在输入和请求完成时调用回调更新父组件状态：

   const ImageLinkForm = ({ updateUrl, markFetchSuccess }) => {
     const onInputChange = (event) => {
       // 获取输入框的url，传递给父组件更新状态
       updateUrl(event.target.value);
     };
   
     // 模拟fetch请求完成后的逻辑
     const handleFetch = async () => {
       try {
         // 这里替换成你的实际fetch请求逻辑
         await fetch('你的接口地址', { /* 请求配置 */ });
         // 请求成功后通知父组件
         markFetchSuccess();
       } catch (err) {
         console.error('请求失败:', err);
       }
     };
   
     return (
       <div>
         <input type="text" onChange={onInputChange} placeholder="输入图片URL" />
         <button onClick={handleFetch}>提交识别</button>
       </div>
     );
   };
   
   export default ImageLinkForm;
   

3. 修改FaceRecognition组件
   通过props接收父组件的状态，根据fetchSuccess的值条件渲染图片：

   const FaceRecognition = ({ url, fetchSuccess }) => {
     return (
       <div>
         {/* 只有请求成功且url不为空时，才渲染图片 */}
         {fetchSuccess && url && <img src={url} alt="识别目标" />}
       </div>
     );
   };
   
   export default FaceRecognition;
   

关键说明 #

• 状态提升是React解决跨组件状态共享的标准方案，确保状态有单一数据源，避免多组件状态不一致的问题。
• 子组件只负责UI渲染和触发事件，状态逻辑交给父组件管理，代码职责更清晰。
• 增加url非空判断，避免请求成功但url为空时渲染无效图片。

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