Question

我的组件InputAvatar有问题-https://codesandbox.io/s/721n5346x6

如果照片尺寸不是200x200像素，如何在选择照片后显示错误消息？

我认为img.onload = function（）是问题所在，因为错误消息没有及时返回。

谢谢前进

Answer 1

您说对了，onload没有及时返回。这是一个异步事件回调，因此仅在图像加载完成后才触发。这会导致getErrors返回一个空数组值，因为它比图像加载要早执行。

为了使代码正常工作，您必须引入一些异步感知的代码，例如。遵守诺言。

getErrors(value = this.state.file || "") {
  // Return a single promise and move the function execution inside.
  return new Promise((resolve, reject) => {
    const errors = []
    const img = new Image();
    img.src = value;
    img.onload = function() {
      var w = img.width;
      var h = img.height;

      errors.push("error");
      if (w != 200 || h != 200) {
        errors.push("The photo must be 200 x 200 px.");
      }
      // Resolve the pending promise with the errors value letting callers know it's ready.
      resolve(errors)
    };
  })
}

这样，您就可以等待图像加载的结果，并以所需的方式使用它。

validate(value = this.state.file || "") {
  this.getErrors(value)
    // Wait for the errors and only then set the state.
    .then(errors => 
      this.setState({
        errors
      });
    )
}

选择照片后如何显示错误消息？

1 个答案: