FileReader

Question

我正在玩弄食物识别 api。

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

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

一旦 FileReader 完成图像编码，该方法调用 redux 动作 fetchIngredientsFromImage 将 base64 图像 post 转换为路由以触发 API 调用（到分析图片中的成分）。

响应被发回前端，用于更新store。

所以基本上，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
};

Answer 1

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

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 }));
    };
  };

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

FileReader - how to update local state after store is updated?

reactjs

redux