React开发：PUID变更触发API调用后自动为FirstName TextField赋值

开发者阿泽

2026-9-28

实现方案

步骤1：清理冗余代码

先删除父组件formReducer中"PUID"分支下的fetch逻辑，reducer属于纯函数不能包含异步副作用，且你已经将API请求迁移到子组件事件处理函数中，原有逻辑会导致重复发起请求。
修改后父组件的formReducer代码：

function formReducer(state, action) {
    switch (action.type) {
        case "PUID":
            return { ...state, PUID: action.payload };
        case "FIRST_NAME_CHANGE":
            return { ...state, FirstName: action.payload };
        default:
            throw new Error();
    }
}

步骤2：修改子组件onPUIDChanged逻辑

请求拿到返回结果后，直接调用dispatch触发FIRST_NAME_CHANGE的action，把接口返回的total值作为payload传入即可，全局状态更新后FirstName输入框会自动绑定最新值。
修改后子组件的onPUIDChanged代码：

const onPUIDChanged = (event) => {    
  // 先更新PUID状态
  dispatch({ type: "PUID", payload: event.target.value });
  // 发起API请求
  fetch('https://api.npms.io/v2/search?q=react')
    .then(result => result.json())
    .then(data => {        
      // 请求成功后更新FirstName的值，转字符串和字段类型对齐
      dispatch({ 
        type: "FIRST_NAME_CHANGE", 
        payload: String(data.total)
      });
    })
    .catch(err => {
      // 可选：添加请求失败的异常处理逻辑
      console.error('请求失败', err);
    });
};