反應孩子JSX元素不從父母繼承此

感覺就像我的問題是非常簡單的，但我不知道爲什麼它不工作。反應孩子JSX元素不從父母繼承此

爲什麼我想要做的是基本的東西 - 我從父母到孩子傳遞一個函數，它應該增加父母的「測試」值爲1的值（這只是一個概念證明）。問題發生在調用父函數時。。我收到「無法讀取的未定義的屬性測試」在調試器this.props也是不確定的，所以毫不奇怪，this.props.test將是我缺少的是

父：？

export default class GameList extends Component { 
    constructor({ navigation }) { 
    super(); 
    this.state = { 
     test: 0, 
    } 
    }; 


    updateState() { 
    this.setState({ 
     test: this.state.test++, 
    }); 
    } 

    render() { 
    return (
    <View style={styles.background}> 
     <Header updateState={this.updateState} /> 
    </View > 
    ) 
    } 
}

兒童：

import React, { Component } from 'react'; 
import { View, TextInput } from 'react-native'; 

import styles from './styles'; 

class Header extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TextInput 
      style={styles.input} 
      placeholder="Search..." 
      onChangeText={(text) => { 
      this.props.updateState(); 
      }} 
     /> 
     </View> 
    ); 
    } 

    filterRows(searchText, dataSet) { 
    return dataSet.filter((record) => record.title.includes(searchText)); 
    } 
} 


export default Header;

來源

2017-04-30 MTM

這裏有兩個問題：

將您的構造函數中的方法綁定爲正確的上下文。關於爲什麼這是必要的更多信息在React documentation under Handling Events。
請勿在狀態屬性上使用++，因爲它會在檢查是否重新呈現時（即：this.state.test === newState.test？是的，因爲原件已被更改）而修改原始狀態並可能會破壞所有比較。有下React documentation under Component在此，請注意他們是如何使用quantity: state.quantity + 1而不是quantity: state.quantity++

因此，你得到：

export default class GameList extends Component { 
    constructor({ navigation }) { 
    super(); 
    this.state = { 
     test: 0, 
    } 
    this.updateState = this.updateState.bind(this); // Bind to the correct context 
    }; 


    updateState() { 
    this.setState({ 
     test: this.state.test + 1, // Do not mutate the original state 
    }); 
    } 

    render() { 
    return (
    <View style={styles.background}> 
     <Header updateState={this.updateState} /> 
    </View > 
    ) 
    } 
}

來源

2017-04-30 17:15:31 grovesNL

沿着'++':)的好傳 – Icepickle

在你的父類的構造你需要的功能正確綁定

這是它可能是什麼樣子：

constructor(props) { 
    super(props); 
    this.updateState = this.updateState.bind(this); 
    this.state = { test: 0 }; 
}

來源

2017-04-30 17:10:05

你this方面不再綁定當this.updateState函數被調用時，要做到這一點，你可以使用箭頭函數（設置是在this上下文當前上下文）

查看關於箭頭的功能更多信息而這種情況下here

render() { 
    return (
    <View style={styles.background}> 
     <Header updateState={() => this.updateState()} /> 
    </View > 
) 
}

來源

2017-04-30 17:11:19 Icepickle

你們都是正確的人;）我不知道，只是將函數作爲參數傳遞給父元素我沒有傳遞上下文 - 帶箭頭的函數包裝最適合我， m使用ES6，但該綁定方法也按預期工作。我也改變了setState來設置基於prevState參數的值，它現在都工作得很好！ +1給你們所有人，併爲ES6解決方案出演！ – MTM

@grovesNL當我在childs元素中傳遞參數時的任何原因：this.props.updateState（filteredResults） - 參數未傳遞給父項函數？在Parent中，我得到updateState（filteredResults）{這個。setState（（prevState）=>（{ dataSource：this.ds.cloneWithRows（filteredResults）， }））; } – MTM

@MTM你必須通過箭頭函數版本 – Icepickle

基於上面的答案更正，工作示例：

父：

export default class GameList extends Component { 
    constructor({ navigation }) { 
    super(); 
    this.state = { 
     test: 0, 
    } 
    }; 

    updateState() { 
    this.setState((prevState) => { 
     debugger; 
     return ({ 
     test: prevState.test + 1, 
     }); 
    }); 
    } 

    render() { 
    return (
     <View style={styles.background}> 
     <Header updateState={() => { this.updateState() }} />  
     </View > 
    ) 
    } 
}

孩子：

class Header extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TextInput 
      style={styles.input} 
      placeholder="Search..." 
      onChangeText={(text) => { 
      this.props.updateState(); 
      }} 
     /> 
     </View> 
    ); 
    } 
} 


export default Header;

來源

2017-04-30 17:28:36 MTM

反應孩子JSX元素不從父母繼承此

回答

相關問題