React中如何将Content组件的用户输入传递给Api组件？

一、如何把用户输入传递给API请求的参数 #

核心思路是让GetUrban函数接受搜索关键词作为参数，动态设置请求的term，然后在Content组件调用时传入用户输入的值。

1. 修改Api模块的GetUrban函数 #

把GetUrban改成接受term参数，在请求时动态设置params.term：

import axios from "axios";

export async function GetUrban(term) {
  const optionsUrban = {
    method: 'GET',
    url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
    params: { term: term }, // 用传入的参数设置搜索词
    headers: {
      'X-RapidAPI-Key': 'API KEY HERE',
      'X-RapidAPI-Host': 'mashape-community-urban-dictionary.p.rapidapi.com'
    }
  };
  
  const api2 = await axios.request(optionsUrban);
  return api2.data;
}

2. 修正Content组件的调用逻辑 #

• 文本输入的初始状态应该用空字符串""，而非数组[]
• 移除submitValue里多余的setInputValue(inputValue)（onChange已经实时更新了输入值）
• 调用GetUrban时传入inputValue：

import { GetUrban } from "../Api";
import { useState } from "react";

const Content = () => {
  const [urbanList, setUrban] = useState([]);
  const [inputValue, setInputValue] = useState(""); // 修正初始状态

  const submitValue = () => {
    // 传入用户输入值调用API
    GetUrban(inputValue).then((result) => {
      setUrban(result);
    });
  };

  return (
    <div>
      <div className="headerContainer parent">
        
        <div className="searchBar">
          <input
            placeholder="Put something here"
            className="input"
            name="text"
            type="text"
            onChange={(e) => setInputValue(e.target.value)}
          ></input>
          <div className="urbanBar">
            <button className="cta" type="submit">
              <span className="hover-underline-animation" onClick={submitValue}>
                SEARCH FOR URBAN DICTIONARY HERE
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Content;

二、关于Api组件的疑问 #

你当前的Api.js不是React组件，它只是一个普通的JavaScript工具模块，里面导出的是异步请求函数，并非function Api() { return <div>...</div> }这种符合React组件规范的代码。

所以不存在「Api组件是Content的子组件」的说法——React父子组件特指一个组件的return里渲染了另一个组件（比如<Content><Api /></Content>），你这里只是在Content里导入并调用了Api模块的函数，属于模块间的函数调用关系，不是组件嵌套。

三、导入方式的问题 #

你当前的import { GetUrban } from "../Api";是正确的，因为Api模块用的是export async function GetUrban()这种命名导出，导入时需要用解构语法{ GetUrban }来获取对应函数。如果是用export default GetUrban导出的，才需要用import GetUrban from "../Api";这种默认导入方式，你现在的写法完全没问题。

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