javascript - 为什么 React Redux 中的 props 没有被映射状态更改为 props

Question

我已经使用 mapDispatchToProps 更新了我的商店，如下所示:

function mapDispatchToProps(dispatch){ 
  return{
    addFirstImageUrl: (firstUrl) => dispatch({
      type: "ADD_FIRST_IMAGE_URL",
      firstUrl
    })
  }
}

我知道这是有效的，因为当我运行 mapStateToProps 时，我会像这样记录状态:

function mapStateToProps(state){
  console.log(state)
  return{
    firstImageUrl: state.firstImageUrl
  }
}

这将返回:

}
Object {
  "posts": Object {
    "firstImageTitle": "",
    "firstImageUrl": "https://firebasestorage.MYURL",
    "secondImageTitle": "",
    "secondImageUrl": "",
  },
}

但是，当我调用 this.props.firstImageUrl 时，它返回未定义。我觉得应该返回上面的url，这样的想法是错误的吗？

组件功能:

uploadImage = async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    var ref = firebase
      .storage()
      .ref()
      .child(new Date().toString());
    const snapshot = await ref.put(blob)
    const url = await snapshot.ref.getDownloadURL();
    this.props.addFirstImageUrl(url);
    console.log("First Image Url: " + this.props.firstImageUrl)
  };

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from "react-native";
import { Camera } from "expo-camera";
import * as Permissions from "expo-permissions";
import { FontAwesome } from "@expo/vector-icons";
import * as firebase from "firebase";
import { connect } from "react-redux";
import { addFirstImageUrl } from "../store/actions/posts";
import { bindActionCreators } from "redux";

function mapStateToProps(state){
  console.log(state)
  return{
    firstImageUrl: state.firstImageUrl
  }
}

function mapDispatchToProps(dispatch){ 
  return{
    addFirstImageUrl: (firstUrl) => dispatch({
      type: "ADD_FIRST_IMAGE_URL",
      firstUrl
    })
  }
}

class FirstCameraScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasCameraPermissions: null,
      type: Camera.Constants.Type.back,
      isFlashLIghtOn: Camera.Constants.FlashMode.off,
      firstImageUrl: " "
    };
  }

  static navigationOptions = {
    title: "FirstCamera"
  };

  //ask for camera permission
  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermissions: status === "granted"
    });
  }

  // Flip the camera
  flipCamera = () => {
    this.setState({
      type:
        this.state.type === Camera.Constants.Type.back
          ? Camera.Constants.Type.front
          : Camera.Constants.Type.back
    });
  };

  //Toggle Flashlight
  flashLight = () => {
    this.setState({
      isFlashLIghtOn:
        this.state.isFlashLIghtOn === Camera.Constants.FlashMode.off
          ? Camera.Constants.FlashMode.on
          : Camera.Constants.FlashMode.off
    });
  };

  //Take Picture and send to home
  takePicture = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync();
      if (!photo.cancelled) {
        await this.uploadImage(photo.uri);
      }
      this.props.navigation.navigate("FirstNamingScreen");
    }
  };

  uploadImage = async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    var ref = firebase
      .storage()
      .ref()
      .child(new Date().toString());
    const snapshot = await ref.put(blob)
    const url = await snapshot.ref.getDownloadURL();
    this.props.addFirstImageUrl(url);
    console.log("First Image Url: " + props.posts)
  };

  render() {
    const { hasCameraPermissions } = this.state;
    const { navigate } = this.props.navigation;
    if (hasCameraPermissions === null) {
      return <View />;
    } else if (hasCameraPermissions === false) {
      return (
        <View>
          <Text>No access to Camera</Text>
        </View>
      );
    } else if (hasCameraPermissions === true) {
      return (
        <View style={styles.container}>
          <Camera
            style={styles.cameraView}
            type={this.state.type}
            flashMode={this.state.isFlashLIghtOn}
            ref={ref => {
              this.camera = ref;
            }}
          >
            <View style={styles.actionContainer}>
              <TouchableOpacity
                onPress={() => this.flipCamera()}
                style={styles.iconHolder}
              >
                <FontAwesome name="camera" size={35} style={styles.icon} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  this.takePicture();
                }}
                style={styles.iconHolder}
              >
                <FontAwesome name="circle" size={35} style={styles.icon} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => this.flashLight()}
                style={styles.iconHolder}
              >
                <FontAwesome name="flash" size={35} style={styles.icon} />
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(FirstCameraScreen)

Answer 1

将 mapStateToProps 更改为此。

function mapStateToProps(state) {
  console.log(state);
  return {
    firstImageUrl: state.posts.firstImageUrl
  };
}

还有你的uploadImage方法。

  uploadImage() {
    const response = await fetch(uri);
    const blob = await response.blob();
    var ref = firebase
      .storage()
      .ref()
      .child(new Date().toString());
    const snapshot = await ref.put(blob);
    const url = await snapshot.ref.getDownloadURL();
    this.props.addFirstImageUrl(url);
    console.log("First Image Url: " + this.props.firstImageUrl);
  };

构造函数

constructor(props) {
    super(props);
    this.uploadImage = this.uploadImage.bind(this);
    this.state = {
      hasCameraPermissions: null,
      type: Camera.Constants.Type.back,
      isFlashLIghtOn: Camera.Constants.FlashMode.off,
      firstImageUrl: " "
    };
  }