Firebase 如何将url作为道具正确分配给action creator

我正在使用react native image crop picker和react native fetch blob从摄影机卷中抓取图像，然后将其保存到Firebase存储桶中

class CreateForm extends Component {
  componentWillMount() {
   this.setState({ loading: false });
  }

  // RNFetchBlob and RNImageCropPicker working together to store an 
  // image in firebase, and then returning a url for that image.

  openImage() {
    this.setState({ loading: true });
    const Blob = RNFetchBlob.polyfill.Blob;
    const fs = RNFetchBlob.fs;
    window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
    window.Blob = Blob
    //const uid = "12345"

    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
      mediaType: 'photo',
    }).then(image => {
      const imagePath = image.path;

      let uploadBlob = null;

     const storage = firebase.storage();
     const storageRef = storage.ref();
     const imageRef = storageRef.child('dp.jpg');
     const mime = 'image/jpg';
     fs.readFile(imagePath, 'base64')
       .then((data) => {
          //console.log(data);
       return Blob.build(data, { type: `${mime};BASE64` });
    })
       .then((blob) => {
          uploadBlob = blob;
          return imageRef.put(blob, { contentType: mime });
       })
      .then(() => {
          uploadBlob.close();
          return imageRef.getDownloadURL();
       })

在这段代码出现之前，一切都正常工作：

      .then((url) => {
          console.log(url);
          this.props.entryUpdate({ prop: 'image', url });
    });
   });
  }

它可以很好地记录url。但当我尝试将此url作为名为“image”的道具分配给动作创建者“entryUpdate”时，Firebase实时数据库会获取一个未定义的对象并抛出一个错误

以下是操作创建者“entryUpdate”：

 export const entryUpdate = ({ prop, value }) => {
   return {
    type: ENTRY_UPDATE,
    payload: { prop, value }

  };
 };

没有“图像”道具，一切都能正确执行。所以我知道我没有给动作创建者正确的语法。

this.props.entryUpdate({ prop: 'image', url });

---

线路必须是完全错误的。任何帮助都将不胜感激

问题在于，您正在错误地分解传递到action creator的对象，{prop，value}基本上是从传递的对象获取属性。prop是正确的，因为作为参数传递的对象有一个prop键，其值为“image”。但是，值未定义，因为值不是作为参数传递的对象上定义的键。使用url是正确的，应该可以解决您的问题：

export const entryUpdate = ({ prop, url }) => {
   return {
    type: ENTRY_UPDATE,
    payload: { prop, url } // or { prop, value: url } if you dont want to edit your dispatcher.

  };
 };

这就是成功的原因：

.then((url) => {
      const { image } = this.props;
      this.props.entryUpdate({ prop: 'image', value: url });

我必须将{image}声明为this.props，并指定

value: url

---

谢谢你，马特！我真的很感激！如果我在entryUpdate中传递了很多不同的道具呢？有些是{prop，value}。有没有一种方法可以将url分配给我的组件中的值？或者将url和值作为entryUpdate的参数。这有意义吗？Cuz常量值=url；this.props.entryUpdate{prop:'image'，value}；不起作用。嗯，使用当前代码，this.props.entryUpdate{prop:'image'，value:url}；如果你想让你的动作创建者保持原样，它也应该起作用。如果你还不能查看你的状态/动作调用，设置redux开发工具也会有帮助！这很有效。谢谢你，伙计！感谢大家对redux开发工具的了解。