javascript - غير معرف ليس كائن تقييم this.state/this.props




reactjs scope (3)

كيف يمكنني ربط وظيفة خارج النطاق في رد فعل الأصلي؟ أحصل على الأخطاء:

undefined is not an object evaluating this.state   

و

undefined is not an object evaluating this.props

أنا باستخدام طريقة العرض لاستحضار renderGPSDataFromServer() عند تحميل البيانات. المشكلة هي، وأنا أحاول استخدام _buttonPress() و calcRow() داخل renderGPSDataFromServer() ، ولكن أنا الحصول على تلك الأخطاء.

لقد اضفت

constructor(props) {
    super(props);
    this._buttonPress = this._buttonPress.bind(this);
    this.calcRow = this.calcRow.bind(this);

إلى منشئ بلدي ولقد تغيرت _buttonPress() { إلى _buttonPress = () => { ولا يزال شيئا.

أعتقد أنني أفهم المشكلة ولكنني لا أعرف كيفية إصلاحها:

renderLoadingView() {
    return (
        <View style={[styles.cardContainer, styles.loading]}>
            <Text style={styles.restData}>
                Loading ...
            </Text>
        </View>
    )
}

_buttonPress = () =>  {
    this.props.navigator.push({
        id: 'Main'
    })
}

renderGPSDataFromServer =() => {
    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map(function(data, i){
        return(
            <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}>
                <View style={styles.cardContentLeft}>
                    <TouchableHighlight style={styles.button}
                        onPress={this._buttonPress().bind(this)}>
                        <Text style={styles.restData}>View Video</Text>
                    </TouchableHighlight>
                </View>

          <View style={styles.cardContentRight}>
            <Text style={styles.restData}>{i}</Text>
            <View style={styles.gpsDataContainer}>
              <Text style={styles.gpsData}>
              {Number(data.lat).toFixed(2)}</Text>
              <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text>
            </View>
            <Text  style={styles.gpsData}>
            {this.calcRow(55,55).bind(this)}
            </Text>
          </View>
        </View>
      );
    });
}

render = ()=> {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return(
      <View>
        {this.renderGPSDataFromServer()}
      </View>
    )
}};

كيف أذهب إلى إصلاح هذا وفي هذه الحالة ما هي المشكلة؟


هذا.القراءة للقراءة فقط

رد مستندات - مكون والدعائم

وبالتالي يجب على عنصر لا تحاول تعديلها ناهيك عن تحور لهم كما تفعلون هنا:

  _buttonPress = () =>  {
      this.props.navigator.push({
        id: 'Main'
      })
  }

أقترح استخدام الولاية بدلا من ذلك:

_buttonPress = () =>  {
  this.setState = {
    ...this.state,
    navigator: {
      ...this.state.navigator,
      id: 'Main'
    }
  }
}

فيما يتعلق بمسألة الربط:

يأخذ الأسلوب .map وسيطة 2 التي يتم استخدامها لتعيين قيمة this عند استدعاء استدعاء.

في سياق سؤالك، تحتاج فقط لتمرير this كوسيط 2ND لك .map طريقة لربط نطاق المكونات this إلى ذلك.


أنت ذاهب في الاتجاه الصحيح، ولكن لا تزال هناك مشكلة طفيفة. أنت تمرير function إلى استدعاء map التي لها نطاق مختلف ( this ) من المكون الخاص بك (لأنه ليس وظيفة السهم)، لذلك عند القيام bind(this) ، كنت إعادة بناء رد الاتصال الخاص بك لاستخدام نطاق من map . وأعتقد أن هذا يجب أن تعمل، فإنه يتحول أساسا رد الاتصال التي تمريرها map في وظيفة السهم. أيضا، منذ bind في منشئ، لا تحتاج إلى القيام بذلك مرة أخرى:

  // The constructor logic remains the same
  // ....
  renderLoadingView() {
      return (
      <View style={[styles.cardContainer, styles.loading]}>
        <Text style={styles.restData}>
          Loading ...
        </Text>
      </View>
      )
    }

  _buttonPress = () =>  {
      this.props.navigator.push({
        id: 'Main'
      })
  }

  renderGPSDataFromServer =() => {

    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map((data, i) => {
      return(
        <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}>

          <View style={styles.cardContentLeft}>
            <TouchableHighlight style={styles.button}
             onPress={this._buttonPress}>
            <Text style={styles.restData}>View Video</Text>
            </TouchableHighlight>
          </View>

          <View style={styles.cardContentRight}>
            <Text style={styles.restData}>{i}</Text>
            <View style={styles.gpsDataContainer}>
              <Text style={styles.gpsData}>
              {Number(data.lat).toFixed(2)}</Text>
              <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text>
            </View>
            <Text  style={styles.gpsData}>
            {this.calcRow(55,55).bind(this)}
            </Text>
          </View>

        </View>
      );
    });
  }

  render = ()=> {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return(
      <View>
        {this.renderGPSDataFromServer()}
      </View>
    )
  }};

يحدث ذلك لأن الدالة داخل طريقة map تخلق سياقا مختلفا. يمكنك استخدام وظائف السهم كرد في طريقة map للملزمة المعجمية. وهذا من شأنه أن يحل المشكلة التي تواجهها.

renderGPSDataFromServer =() => {

    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map((data, i) => {
      return(
        <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}>

          <View style={styles.cardContentLeft}>
            <TouchableHighlight style={styles.button}
             onPress={this._buttonPress().bind(this)}>
            <Text style={styles.restData}>View Video</Text>
            </TouchableHighlight>
          </View>

          <View style={styles.cardContentRight}>
            <Text style={styles.restData}>{i}</Text>
            <View style={styles.gpsDataContainer}>
              <Text style={styles.gpsData}>
              {Number(data.lat).toFixed(2)}</Text>
              <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text>
            </View>
            <Text  style={styles.gpsData}>
            {this.calcRow(55,55).bind(this)}
            </Text>
          </View>

        </View>
      );
    });
  }

أيضا، مرة واحدة كنت قد استخدمت وظائف السهم في تعريف وظيفة فئة لا تحتاج إلى ربط لهم في منشئ مثل:

constructor(props) {
  super(props);
  this._customMethodDefinedUsingFatArrow = this._customMethodDefinedUsingFatArrow.bind(this)
}

أيضا، مرة واحدة كنت قد حددت وظائف فئة وظائف السهم، لا تحتاج إلى استخدام وظائف السهم في حين استدعاء لهم إما:

class Example extends React.Component {
  myfunc = () => {
    this.nextFunc()
  }

  nextFunc = () => {
    console.log('hello hello')
  }

  render() {
    // this will give you the desired result
    return (
      <TouchableOpacity onPress={this.myFunc} />
    )
    
    // you don't need to do this
    return (
      <TouchableOpacity onPress={() => this.myFunc()} />
    )
  }
}





jsx