react-native - 在构造函数中分配的 props 在 componentDidMount 中不可用

Question

有一个组件Chat定义如下:

constructor(props) {
      super(props);

      this.props = {
        eventId : props.navigation.state.params.eventId,
        user: props.navigation.state.params.user
      }
      console.log("user in chat  : ", this.props.user);
      console.log("event id in chat: ", this.props.eventId);
      this.state = {
        messages: []
      };
    };

    async componentDidMount() {
      try {
        let url = `http://192.168.2.133:3000/api/messages/e?_device_id=${encodeURIComponent(DeviceInfo.getUniqueID())}&event_id=${encodeURIComponent(this.props.eventId)}`;
        console.log("message URL : ", encodeURIComponent(url));
        let res = await fetch(encodeURIComponent(url), {
          method: "GET",
           headers: {
            "x-auth-token": "mytoken", 
          }
        });

这是我的控制台输出:

'event id in chat: ', 1
04-08 23:42:24.456 15213 15259 E ReactNativeJS: 'Warning: %s(...): When calling super() in `%s`, make sure to pass up the same props that your component\'s constructor was passed.', 'Chat', 'Chat'
04-08 23:42:25.085 15213 15259 I ReactNativeJS: 'message URL : ', 'http%3A%2F%2F192.168.2.133%3A3000%2Fapi%2Fmessages%2Fe%3F_device_id%3D02f7e7aa907a2a2b%26event_id%3Dundefined'

Chat 构造函数 中存在等于 1 的事件 id。但是，this.props.eventId 分配的 event_id 在 componentDidMount 中是未定义。我不知道为什么 this.props.eventId 不像构造函数中那样返回 1。

这是父组件中的 _onPress 函数，它传递 2 个属性:

_onPress(id) {
      this.props.navigation.navigate("Chat", {eventId: id, user: this.state.user});
    }

Answer 1

Prop 是不可变的，您无法在组件本身内部更改它们。请改用默认 Prop 。