本教程详细讲解了在React中如何实现子组件向父组件传递数据。通过利用Props传递回调函数，父组件可以接收并处理子组件触发的事件和数据，同时结合`useState`管理状态和`useEffect`响应数据变化，实现动态数据流和UI更新。

在React应用开发中，组件之间的数据通信是核心概念之一。虽然父组件向子组件传递数据通常通过props实现，但子组件向父组件传递数据（即“数据提升”）则需要不同的策略。本文将详细介绍如何通过回调函数和React的状态管理机制，实现子组件（如一个输入表单）将其内部数据传递给父组件，并触发父组件中的数据请求等副作用。

理解React的数据流

React推崇单向数据流（One-Way Data Flow），这意味着数据通常是从父组件流向子组件。当子组件需要影响父组件的状态或行为时，它不能直接修改父组件的数据。相反，父组件会向子组件传递一个函数（作为props），子组件在特定事件发生时调用这个函数，并将需要传递的数据作为参数传递给它。父组件接收到数据后，可以更新自身的状态，从而实现数据从子组件“回流”到父组件。

实施子组件向父组件的数据传递

我们将以一个输入框组件InputField和一个主应用组件App为例，演示如何将InputField中用户输入的值传递给App组件，并用于App组件中的API请求。

1. 修改子组件：InputField.js

InputField组件负责渲染一个输入框和提交按钮。当用户提交表单时，它需要将输入的值传递给父组件。这可以通过在组件的props中接收一个回调函数来实现。

首先，修改InputField组件以接收一个名为onSubmit的prop。这个onSubmit prop将是一个函数，由父组件提供。当表单提交时，我们调用这个函数，并将输入框的值作为参数传递给它。

// InputField.js
import React from 'react';

export default function InputField({ onSubmit }) { // 接收 onSubmit prop
  function handleSubmit(e) {
    // 阻止浏览器默认的表单提交行为，防止页面刷新
    e.preventDefault();

    // 读取表单数据
    const form = e.target;
    const inputVal = form.myInput.value;

    console.log("Input value from child:", inputVal);

    // 调用父组件传递的回调函数，并传入输入值
    if (onSubmit) {
      onSubmit(inputVal); 
    }
  }

  return (
    

      
      Send
    
  );
}

在上述代码中：

• InputField组件现在解构了onSubmit prop。
• 在handleSubmit函数内部，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，inputVal会被发送到父组件。

2. 修改父组件：App.js

App组件需要完成以下几件事：

1. 声明一个状态变量来存储从InputField接收到的值。
2. 创建一个处理函数，作为onSubmit prop传递给InputField。这个函数将负责更新状态变量。
3. 修改useEffect钩子，使其依赖于这个新的状态变量，以便在输入值变化时重新发起API请求。
4. 重要提示：在React中，组件应该通过JSX语法来渲染，而不是像调用普通函数那样InputField()。直接调用函数会导致每次渲染都创建一个新的组件实例，失去React的组件优化和生命周期管理。

// App.js
import './App.css';
import AccountNumber from "./components/AccountNumber";
import InputField from "./components/InputField";
import { useEffect, useState } from "react";

function App() {
  // 状态用于存储从InputField接收到的搜索值
  const [searchValue, setSearchValue] = useState(null); 

  // 状态用于管理API请求的token数据
  const [tokens, setTokens] = useState([]);
  // 状态用于管理加载状态
  const [loading, setLoading] = useState(false);

  // 处理从InputField组件传递过来的值
  const handleSearchSubmit = (val) => {
    setSearchValue(val); // 更新searchValue状态
  };

  // useEffect 钩子用于在searchValue变化时发起API请求
  useEffect(() => {
    // 只有当searchValue不为null时才发起请求，避免初始加载时发送无效请求
    if (searchValue) { 
      setLoading(true);
      fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) // 使用searchValue
        .then(response => response.json())
        .then(json => setTokens(json))
        .catch(error => {
          console.error("Error fetching tokens:", error);
          setTokens([]); // 请求失败时清空数据
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setTokens([]); // 如果没有搜索值，则清空token数据
    }
    console.log("Current tokens state:", tokens); // 注意：这里的tokens可能是旧值，因为useState是异步更新的
  }, [searchValue]); // 将searchValue添加到依赖数组中，当searchValue变化时重新执行useEffect

  // ... (round 和 numberWithSpaces 函数保持不变)
  function round(nr, ten) { // arondi un chiffre.
    return Math.round(nr * ten) / ten;
  }

  function numberWithSpaces(nr) { // formate un chiffre(x xxx xxx).
    return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  }

  return (
     {/* 将  改为 ，因为 content 不是标准HTML标签 */}
        
            
                
Total number of accounts
                

            
            
                {/* 正确地渲染InputField组件，并将handleSearchSubmit作为onSubmit prop传递 */}
                 
            
            
当前搜索地址: {searchValue || "未输入"}
 {/* 显示当前搜索值 */}
        
        
            
              {loading ? (
                Loading...
              ) : (
                <>
                  
Tokens


                    {tokens.length > 0 ? tokens.map(token => (
                       {/* 使用更稳定的key */}
                        
                    )) : (
                        
                    )}
                  

                    

                      
Name
                      
Price
                      
Hold
                    
                    

                        @@##@@ 
                          
{token.name}
 
                        
                        
 
${round(token.price, 10000000)}
 
                        
 
                          
{round(token.balance / Math.pow(10, token.decimals), 10000000)}
 
                          
${round(token.valueUsd, 10000000)}
                        
                      
暂无代币数据，请尝试输入地址。
                
              )}
            
           
    
  );
}

export default App;

在上述代码中：

• useState(null)创建了一个名为searchValue的状态变量，用于存储从InputField获取的地址。
• handleSearchSubmit函数被定义为接收一个参数val，并使用setSearchValue(val)来更新searchValue状态。
• 是关键所在。我们将handleSearchSubmit函数作为onSubmit prop传递给InputField。当InputField内部调用onSubmit(inputVal)时，实际上就是调用了App组件中的handleSearchSubmit函数，并将inputVal作为参数传递过去。
• useEffect的依赖数组现在包含了[searchValue]。这意味着每当searchValue状态发生变化时（即用户提交了新的地址），useEffect中的代码就会重新执行，从而触发新的API请求。
• 添加了if (searchValue)条件判断，确保只有当searchValue有值时才发起API请求，避免在组件初次渲染时（searchValue为null）发送无效请求。
• 将content标签修正为div，并为img标签添加了alt属性。

关键概念回顾

1. Props (属性)：是React组件之间传递数据的主要方式。父组件通过props向子组件传递数据和函数。
2. State (状态)：组件内部管理数据的方式。当状态改变时，组件会重新渲染。
3. 回调函数作为Props：实现子组件向父组件通信的关键机制。子组件调用父组件作为prop传递的函数，并将数据作为参数传递。
4. useEffect依赖数组：控制副作用（如API请求）执行时机的重要工具。当依赖数组中的值发生变化时，useEffect会重新执行。

注意事项

• 组件渲染方式：务必使用JSX语法来渲染组件，而不是ComponentName()。
• 回调函数命名：通常，传递给子组件的回调函数以on开头，后跟事件名称（如onSubmit, onClick等），以清晰表明其用途。
• 初始加载与空状态：在useEffect中处理searchValue为null或空字符串的情况，避免发送不必要的或错误的API请求。
• 错误处理：在fetch请求中添加.catch()块来处理网络错误或API响应错误，提升用户体验。
• 加载指示：在数据请求期间显示加载状态（如“Loading...”），告知用户应用正在工作。

总结

通过本教程，我们学习了如何在React中实现子组件向父组件传递数据。核心方法是父组件将一个回调函数作为props传递给子组件，子组件在特定事件发生时调用此回调函数并传递数据。父组件接收到数据后，可以更新自身的状态，并结合useEffect钩子来响应这些数据变化，执行相应的副作用操作，如发起API请求。掌握这一模式对于构建复杂且交互性强的React应用至关重要。