FileReader - 商店更新后如何更新本地状态？答案

【问题标题】：FileReader - how to update local state after store is updated?FileReader - 商店更新后如何更新本地状态？
【发布时间】：2020-09-18 00:59:43
【问题描述】：

我在玩食物识别 api。

我有一个本地状态为 ingredients 的组件。

在组件中，我有一个input 标记，它接受文件图像上传并调用cameraHandler 方法onChange。该方法使用FileReader将图片转换为Base64

一旦 FileReader 完成图像编码，该方法会调用 redux 操作 fetchIngredientsFromImage 将 base64 图像发布到路由中，以触发 API 调用（分析图像中的成分）。

响应被发送回前端，用于更新存储。

所以基本上，API调用成功，我得到了我需要的数据，并且存储成功更新。太好了。

但我还需要做的是更新我的本地ingredients 状态。但我不知道如何等待商店更新后再致电setState。

我已经用if(this.props !== prevProps) methodToUpdateLocalState() 尝试了componentDidUpdate，但这不起作用，因为由于某种原因，组件在存储更新后不会重新渲染。结果是componentDidUpdate 中的所有内容都首先运行，然后存储更新然后。我觉得也没有必要（可能）。

我也试过 .then cameraHandler 里面等待的读者，但是 .then 是未定义的。

如果我能得到任何意见，我将不胜感激。在这里真的很茫然，因为我有数据，我只需要以某种方式抓住它，这样我就可以设置状态。

组件

class RecipesSearch extends Component {
  state = {
    ingredients: [], //need to update this after store is updated, but how?
  };

  cameraHandler = async (event) => {
    const { fetchIngredientsFromImage } = this.props;
    const file = event.target.files[0];
    const reader = new FileReader();
    await reader.readAsDataURL(file);
    reader.onloadend = async () => {
      const imgBase = reader.result.replace(/^data:image\/(.*);base64,/, '');
      await fetchIngredientsFromImage(imgBase); //.then here is undefined
    };
  };

render(){
  <input
    className="form-check-input"
    type="file"
    name="camera"
    accept="image/*"
    onChange={this.cameraHandler}
  />
}

操作

const fetchIngredientsFromImage = (imgBase) => async (dispatch) => {
  const { data } = await axios.post(`/api/camera/`, { imgBase });
  return dispatch(setIngredientsFromCamera(data)); //successfully updates store
};

【问题讨论】：

标签： reactjs redux filereader

【解决方案1】：

作为一种解决方法，我在 cameraHandler 中进行了 axios.post 调用。不为此感到自豪，因为我想利用 store 并使其与我的其他方法保持一致，但目前我猜它会做。

cameraHandler = async (event) => {
    // const { loadIngredientsFromImage } = this.props;
    const file = event.target.files[0];
    const reader = new FileReader();
    await reader.readAsDataURL(file);
    reader.onloadend = async () => {
      const imgBase = reader.result.replace(/^data:image\/(.*);base64,/, '');
      await axios
        .post(`/api/camera/`, { imgBase })
        .then((response) => this.setState({ ingredients: response.data }));
    };
  };

【讨论】：