反应孩子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元素不从父母继承此

回答

相关问题