React中如何将子组件Search生成的apiUrl传递给父组件Api

核心实现逻辑和你现有已完成的输入框值传递、提交事件传递逻辑一致，新增自定义回调即可完成apiUrl的父子组件传递，具体修改如下：

1. 父组件（Api组件）修改 #

步骤1：新增定位接口处理方法 #

在Api组件内新增一个用于接收子组件传过来的定位apiUrl、并发起请求的方法：

// 新增：处理子组件传过来的定位接口地址
const handleLocationApi = (locationApiUrl) => {
  axios.get(locationApiUrl).then(getWeatherData);
};

步骤2：给Search子组件传递回调prop #

在渲染Search组件的部分新增prop，把上面的方法传给子组件：

<Search
  data1={searchcity}
  onsubmit={(event) => {
    onsubmit(event);
  }}
  data2={value}
  onchange={(event) => {
    onchange(event);
  }}
  {/* 新增回调prop */}
  onGetLocationUrl={handleLocationApi}
/>

额外优化提示：你现有onsubmit方法里的searchcity = value属于多余的直接修改state操作，useState的set方法是异步的，直接修改state变量不会生效还会引发逻辑异常，建议删除该行。

2. 子组件（Search组件）修改 #

在showPosition方法生成完apiUrl后，调用父组件传过来的回调方法把apiUrl传递出去即可：

const showPosition = (position) => {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  let latandlon = `lat=${latitude}&lon=${longitude}`;
  let apiKey = "23422500afd990f6bd64b60f46cf509a";
  let unit = "metric";
  let apiUrl = `https://api.openweathermap.org/data/2.5/weather?${latandlon}&appid=${apiKey}&units=${unit}`;
  // 新增：触发父组件回调传递apiUrl
  props.onGetLocationUrl(apiUrl);
};

修改完成后，用户点击Current按钮获取定位后生成的apiUrl就会传递到父组件，直接触发接口请求更新页面数据。

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