本教程详细讲解如何在react中实现子组件向父组件传递数据，并利用这些数据触发父组件的api请求。通过将回调函数作为props传递给子组件，并在父组件中使用`usestate`管理状态和`useeffect`处理副作用，我们可以构建一个动态响应用户输入的应用程序。
引言：React组件间通信的核心挑战
在React的组件化开发模式中，数据流通常是单向的，即从父组件流向子组件。然而，在许多实际应用场景中，我们需要子组件（例如用户输入表单）将其产生的数据传递回父组件，以便父组件能够基于这些数据执行相应的操作，比如发起网络请求。本教程将深入探讨如何优雅地实现这一“子传父”的数据通信机制，特别是在需要根据用户输入动态触发API请求的场景。
理解子组件向父组件传递数据的工作原理
React中实现子组件向父组件传递数据的标准模式是利用回调函数。父组件定义一个函数，并将其作为prop传递给子组件。当子组件中发生某个事件（如表单提交、按钮点击）时，它会调用这个通过prop接收到的函数，并将需要传递的数据作为参数传回父组件。父组件接收到数据后，可以更新自身的状态，进而触发UI的重新渲染或执行其他副作用。
第一步：改造子组件 InputField.js
为了让 InputField 组件能够将其内部的输入值传递给父组件，我们需要对其进行修改，使其接受一个回调函数作为prop。
目标
当用户在 InputField 中输入内容并提交表单时，将输入框的值 (inputVal) 传递给父组件。
实现
- 定义 onSubmit prop： InputField 组件将通过props接收一个名为 onSubmit 的函数。
- 调用回调函数： 在 handleSubmit 函数中，获取到 inputVal 后，调用这个 onSubmit prop，并将 inputVal 作为参数传入。
代码示例
// components/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 存在
onSubmit(inputVal);
}
}
return (
<form method="post" onSubmit={handleSubmit}>
<input name="myInput" id="adress-field" placeholder="Enter adress" autoComplete="on" />
<button type="submit" id="adress-button">Send</button>
</form>
);
}解释
现在，InputField 不再直接处理 inputVal 的最终用途，而是将其职责委托给了父组件。它通过 onSubmit prop 提供了一个接口，父组件可以通过这个接口来“监听”子组件的提交事件并获取数据。
第二步：在父组件 App.js 中接收并处理数据
App 组件需要定义一个状态来存储从 InputField 接收到的数据，并使用 useEffect 钩子来监听这个状态的变化，从而触发API请求。
目标
- 在 App 组件中存储从 InputField 接收到的用户输入。
- 根据这个输入值动态地构建API请求URL。
- 当输入值变化时，重新发起API请求。
实现
- 定义状态： 使用 useState 在 App 组件中创建一个状态变量，例如 searchValue，用于存储从 InputField 接收到的值。
- 创建回调函数： 定义一个名为 handleSearchSubmit 的函数。这个函数将作为 InputField 的 onSubmit prop 传递，它接收 InputField 传递过来的值，并用这个值更新 searchValue 状态。
- 传递回调： 在 App 组件中渲染 InputField 时，将 handleSearchSubmit 作为 onSubmit prop 传递给它。
- 更新 useEffect： 修改 useEffect 钩子，使其依赖于 searchValue。当 searchValue 改变时，useEffect 会重新执行，触发新的 fetch 请求。同时，将API URL中的占位符替换为 searchValue。
代码示例
// App.js
import './App.css';
import AccountNumber from "./components/AccountNumber";
import InputField from "./components/InputField";
import { useEffect, useState } from "react";
function App() {
// token fetch 相关状态
const [tokens, setTokens] = useState([]);
const [loading, setLoading] = useState(false);
// 新增状态：用于存储从 InputField 接收到的搜索值
const [searchValue, setSearchValue] = useState(null);
// 处理 InputField 提交的回调函数
const handleSearchSubmit = (val) => {
setSearchValue(val); // 更新 searchValue 状态
};
useEffect(() => {
// 只有当 searchValue 有效时才执行 fetch 请求
if (searchValue) {
setLoading(true);
fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) // 使用 searchValue 构建 URL
.then(response => response.json())
.then(json => setTokens(json))
.finally(() => {
setLoading(false);
});
console.log("Fetching tokens for:", searchValue);
} else {
// 如果 searchValue 为空，可以清空 tokens 或显示提示
setTokens([]);
}
}, [searchValue]); // 将 searchValue 添加到依赖数组，当它变化时重新执行 useEffect
// ... 其他辅助函数（round, numberWithSpaces）保持不变
return (
<content className="content">
<div className="up-side">
<div className="account-number-box">
<p id="p-account-number">Total number of accounts</p>
<p id="account-number"><AccountNumber/></p>
</div>
<div className="adress-search">
{/* 正确地渲染 InputField 组件，并传递回调函数 */}
<InputField onSubmit={handleSearchSubmit} />
</div>
{/* 可以显示当前的搜索值，例如： */}
<p>Current Search Value: {searchValue || "None"}</p>
</div>
<div className="down-side">
<table className="Token-section-output">
{loading ? (
<div>Loading...</div>
) : (
<>
<h1>Tokens</h1>
{/* ... tokens 列表渲染逻辑 ... */}
<table className='Token-section-output' border={0}>
<tr className='token-row-type'>
<th className='token-column'>Name</th>
<th className='center-column'>Price</th>
<th>Hold</th>
</tr>
<tr className="space20"/>
{tokens.length > 0 ? (
tokens.map(token => (
<tr className='token-row' key={token.id}>
<td className='token-column'>
<img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} />
<p>{token.name}</p>
</td>
<td className='center-column'> <p>${round(token.price, 10000000)}</p> </td>
<td>
<p>{round(token.balance / Math.pow(10, token.decimals), 10000000)}</p>
<p className='token-hold'>${round(token.valueUsd, 10000000)}</p>
</td>
</tr>
))
) : (
<tr><td colSpan="3">No tokens found or no search value provided.</td></tr>
)}
</table>
</>
)}
</table>
</div>
</content>
);
}
export default App;解释
- searchValue 状态： App 组件现在拥有了一个 searchValue 状态，它会在 InputField 提交时被更新。
- handleSearchSubmit 回调： 这个函数充当了 InputField 和 App 之间的桥梁。当 InputField 调用 onSubmit 时，实际上是在调用 App 组件中定义的 handleSearchSubmit，从而更新 App 的状态。
- useEffect 依赖： useEffect 的依赖数组中包含了 searchValue。这意味着每当 searchValue 发生变化时（即用户提交了新的输入），useEffect 内部的副作用函数就会重新执行，触发新的API请求。
- 条件 fetch： if (searchValue) 判断确保只有当 searchValue 有实际值时才发起网络请求，避免在组件初次渲染或 searchValue 为空时发出无效请求。
- 组件渲染方式： 注意 InputField 组件现在是使用 JSX 语法 <InputField onSubmit={handleSearchSubmit} /> 进行渲染的，而不是像函数一样直接调用 InputField()。这是React组件的正确使用方式，确保了组件的生命周期和状态管理机制正常工作。
注意事项与最佳实践
- 组件渲染方式： 务必使用 JSX 语法 <ComponentName /> 来渲染 React 组件。直接调用 ComponentName() 会将其作为普通 JavaScript 函数执行，导致组件无法拥有自己的状态、生命周期方法，并且可能导致性能问题或意外行为。
- useEffect 依赖数组： useEffect 的依赖数组是其核心。确保将所有在副作用函数内部使用到的、且可能随时间变化的外部变量（如 searchValue）都包含在依赖数组中。这可以避免闭包问题，并确保副作用在正确的时间点重新运行。
- 初始状态与条件请求： 在 useEffect 中发起网络请求时，通常需要考虑请求参数的初始状态。如果 searchValue 初始为 null 或空字符串，可能不希望立即发起请求。通过 if (searchValue) 这样的条件判断，可以有效控制请求的时机。
- 错误处理： 在实际应用中，fetch 请求应该包含 .catch() 块来处理网络错误、API响应错误或其他异常情况，以提升应用的健壮性。
- 加载状态： 使用 loading 状态来向用户提供视觉反馈，告知数据正在加载中，提升用户体验。
总结
通过本教程，我们学习了如何在React中有效地实现子组件向父组件传递数据，并利用这些数据驱动父组件的复杂逻辑，如动态API请求。核心思想是：父组件定义回调函数并作为props传递给子组件，子组件在特定事件发生时调用该回调函数并传入数据。父组件则利用 useState 管理接收到的数据，并结合 useEffect 钩子来响应数据变化，执行副作用（如网络请求）。掌握这一模式是构建复杂、交互式React应用的关键一步。
