Question

我有点头疼试图制作一个没有提交按钮的非常小的表单，基本上使用onChange对Redux中的操作进行异步调用以节省一些数据

问题是，在按下的每个键中，表单确实非常慢。看起来它正在重新渲染并等待响应返回以再次填充组件。

// from redux
const { firstName, lastName, email } = this.props.user

// component
<input
  value={email}
  ref="email"
  placeholder="jonh.doe@gmail.com"
  onChange={_onChange} />

// dispatch
_onChange() {
  const userInfo = this.getUserInfo()
  this.props.dispatch(updateUser(userInfo))
}

//action
const updateUser = (userInfo) => {
  const endpoint = `/api/user/${userInfo.userId}`

  const config = {
    method: 'PUT',
    body: JSON.stringify(userInfo)
  }

 return {
   type: 'UPDATE_USER',
   payload: new Promise((resolve, reject) => {
     fetch(endpoint, config)
       .then(response => {
         resolve(userInfo)
       })
       .catch(err => { reject(err) })
   })
  }
}

//reducer
case 'UPDATE_USER_FULFILLED': {
  return {
    ...state,
    fetched: true,
    fetching: false,
    user: {
      firstName: payload.firstName,
      lastName: payload.lastName,
      email: payload.email
    }
  }
}

它还在控制台中显示此错误：

 SettingsComponent is changing a controlled input of type undefined to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).

在这种情况下，我不知道该怎么做。任何有用的帮助。

Answer 1

您可以使用debounce功能停止快速火警请求。

它在lodash，下划线库中可用。如果你想要一个普通的javascript版本，那就是

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};


<input onChange={debounce(_onChange, 250)}

如何在asyn redux操作中使用onChange？

1 个答案: