Javascript 函数未传递给子组件

我是react native的学习者，任何帮助都会有很大帮助：），我开始为我的应用程序使用react导航，我有一个子组件作为父组件的标题，这个子组件包含一个

我想在更改子组件的TextInput时更新父组件，通常情况下，将函数作为道具的值传递会起作用，但由于我使用

静态导航选项

访问子组件，这不起作用，我必须设置navigation.params.state，我已经这样做了，我已经阅读了文档，我浏览了这个链接，但它总是返回这个错误

undefined不是一个对象（评估'params.update'）

---

请问我如何才能使此功能正常工作，并将此功能成功传递到

框

组件

盒子组件

class Box extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        search: ""
    }
}

handleChange = (e) => {
    this.props.onUpdate(e.target.value);
    this.setState({search: e.target.value});
}

render() {
    return (
        <TextInput placeholder="Search for your herbs by name,type..." value={this.state.search}
                   onChange={this.handleChange}
                   underlineColorAndroid={'transparent'}
                   style={BackStyles.textBox}/> ); }}

 export default class Home extends React.Component {
onUpdate = (val) => {
    this.setState({
        search: val
    });
    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql("SELECT * FROM data where name like '" + this.state.search + "' ", [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
};
static navigationOptions = ({navigation}) => {
    const {params} = navigation.state.params || {};
    return {
        headerTitle: <Box onUpdate={params.update}/>,
    };
    //   header:  null
};

componentDidMount() {
    this.navigation.setParams({
        update: this.props.onUpdate()
    })
}

constructor(props) {
    super(props);
    this.state = {
        record: [],
        header: null,
        loader: true,
        pressed: {},
        ar: [],
        search: ''
    };

    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql('SELECT * FROM data', [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
}

handlePressedIn = (i, value) => {

    if (this.state.ar.length > 0) {
        this.state.ar.map((value) => {
            this.setState(prevState => {
                const pressed = {...prevState.pressed};
                pressed[value] = false;
                return {pressed};
            })
        });
    }
    this.setState(prevState => {
        if (!this.state.ar.includes(i)) {
            this.setState(prevState => ({
                ar: [...prevState.ar, i]
            }));
        }
        const pressed = {...prevState.pressed};
        pressed[i] = !pressed[i];
        return {pressed};
    });
    this.props.navigation.navigate('Details', {
        itemId: i + 1,
        otherParam: value
    });
};

errorCB(err) {
    console.log("SQL Error: " + err);
}

successCB() {
    console.log("SQL executed fine");
}

openCB() {
    console.log("Database OPENED");
}

render() {
    const herbs = this.state.record.map((herb) =>
        <TouchableNativeFeedback onPress={() => this.handlePressedIn(herb.id - 1, herb.name)} key={herb.id}>
            <View style={this.state.pressed[herb.id - 1] ? BackStyles.herbBox : BackStyles.herb_box}>
                <Image style={BackStyles.image} source={{uri: `${herb.name.replace(/ /g, '')}`}}/>
                <View style={{flexDirection: 'column',}}><Text
                    style={this.state.pressed[herb.id - 1] ? BackStyles.header2 : BackStyles.header}>{herb.name}</Text>
                    <Text
                        style={this.state.pressed[herb.id - 1] ? BackStyles.sub2 : BackStyles.sub}>{herb.bot}</Text></View>
            </View></TouchableNativeFeedback>
    );
    const view = <ScrollView overScrollMode={'never'}>{herbs}</ScrollView>;
    return (
        <View style={BackStyles.main}>
            <View style={{flex: 1}}>
                {
                    this.state.loader ?
                        <ActivityIndicator animating={this.state.loader} color='#28B564' size="large"
                                           style={BackStyles.activityIndicator}/> : <View>{view}</View>
} </View></View> ); }}

类框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“
}
}
handleChange=（e）=>{
this.props.onUpdate（即target.value）；
this.setState（{search:e.target.value}）；
}
render（）{
返回(
); }}

主组件

class Box extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        search: ""
    }
}

handleChange = (e) => {
    this.props.onUpdate(e.target.value);
    this.setState({search: e.target.value});
}

render() {
    return (
        <TextInput placeholder="Search for your herbs by name,type..." value={this.state.search}
                   onChange={this.handleChange}
                   underlineColorAndroid={'transparent'}
                   style={BackStyles.textBox}/> ); }}

 export default class Home extends React.Component {
onUpdate = (val) => {
    this.setState({
        search: val
    });
    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql("SELECT * FROM data where name like '" + this.state.search + "' ", [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
};
static navigationOptions = ({navigation}) => {
    const {params} = navigation.state.params || {};
    return {
        headerTitle: <Box onUpdate={params.update}/>,
    };
    //   header:  null
};

componentDidMount() {
    this.navigation.setParams({
        update: this.props.onUpdate()
    })
}

constructor(props) {
    super(props);
    this.state = {
        record: [],
        header: null,
        loader: true,
        pressed: {},
        ar: [],
        search: ''
    };

    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql('SELECT * FROM data', [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
}

handlePressedIn = (i, value) => {

    if (this.state.ar.length > 0) {
        this.state.ar.map((value) => {
            this.setState(prevState => {
                const pressed = {...prevState.pressed};
                pressed[value] = false;
                return {pressed};
            })
        });
    }
    this.setState(prevState => {
        if (!this.state.ar.includes(i)) {
            this.setState(prevState => ({
                ar: [...prevState.ar, i]
            }));
        }
        const pressed = {...prevState.pressed};
        pressed[i] = !pressed[i];
        return {pressed};
    });
    this.props.navigation.navigate('Details', {
        itemId: i + 1,
        otherParam: value
    });
};

errorCB(err) {
    console.log("SQL Error: " + err);
}

successCB() {
    console.log("SQL executed fine");
}

openCB() {
    console.log("Database OPENED");
}

render() {
    const herbs = this.state.record.map((herb) =>
        <TouchableNativeFeedback onPress={() => this.handlePressedIn(herb.id - 1, herb.name)} key={herb.id}>
            <View style={this.state.pressed[herb.id - 1] ? BackStyles.herbBox : BackStyles.herb_box}>
                <Image style={BackStyles.image} source={{uri: `${herb.name.replace(/ /g, '')}`}}/>
                <View style={{flexDirection: 'column',}}><Text
                    style={this.state.pressed[herb.id - 1] ? BackStyles.header2 : BackStyles.header}>{herb.name}</Text>
                    <Text
                        style={this.state.pressed[herb.id - 1] ? BackStyles.sub2 : BackStyles.sub}>{herb.bot}</Text></View>
            </View></TouchableNativeFeedback>
    );
    const view = <ScrollView overScrollMode={'never'}>{herbs}</ScrollView>;
    return (
        <View style={BackStyles.main}>
            <View style={{flex: 1}}>
                {
                    this.state.loader ?
                        <ActivityIndicator animating={this.state.loader} color='#28B564' size="large"
                                           style={BackStyles.activityIndicator}/> : <View>{view}</View>
} </View></View> ); }}

导出默认类Home.Component{
onUpdate=（val）=>{
这是我的国家({
搜索：val
});
让db=SQLite.openDatabase({
名称：“test.db”，
createFromLocation:“~Herbo.db”，
地点：'图书馆'
}，this.openCB，this.errorCB）；
数据库事务（（tx）=>{
tx.executeSql（“从数据中选择*，其中名称为“+”this.state.search+”，[]，（tx，results）=>{
console.log（“查询完成”）；
var len=results.rows.length；
for（设i=0；i({
记录：[…prevState.record，行]，
按下：[…prevState.pressed，false]
}));
log（`Record:${row.name}`）；
//睡眠（2）；
//this.setState（{record:row}）；
}
this.setState（{loader:false}）
});
});
};
静态导航选项=（{navigation}）=>{
const{params}=navigation.state.params | |{}；
返回{
标题：，
};
//标题：空
};
componentDidMount（）{
this.navigation.setParams({
更新：this.props.onUpdate（）
})
}
建造师（道具）{
超级（道具）；
此.state={
记录：[]，
标题：null，
加载器：是的，
按下：{}，
应收账款：[]，
搜索：“”
};
让db=SQLite.openDatabase({
名称：“test.db”，
createFromLocation:“~Herbo.db”，
地点：'图书馆'
}，this.openCB，this.errorCB）；
数据库事务（（tx）=>{
tx.executeSql（'SELECT*FROM data'，[]，（tx，results）=>{
console.log（“查询完成”）；
var len=results.rows.length；
for（设i=0；i({
记录：[…prevState.record，行]，
按下：[…prevState.pressed，false]
}));
log（`Record:${row.name}`）；
//睡眠（2）；
//this.setState（{record:row}）；
}
this.setState（{loader:false}）
});
});
}
扶手DIN=（i，值）=>{
如果（this.state.ar.length>0）{
this.state.ar.map（（值）=>{
this.setState（prevState=>{
const pressed={…prevState.pressed}；
按下[值]=假；
返回{按下}；
})
});
}
this.setState（prevState=>{
如果（！本州应收账款包括（i））{
this.setState（prevState=>({
ar:[…prevState.ar，i]
}));
}
const pressed={…prevState.pressed}；
按下[i]=！按下[i]；
返回{按下}；
});
this.props.navigation.navigate（'Details'{
itemId:i+1，
otherParam:值
});
};
errorCB（err）{
log（“SQL错误：+err”）；
}
successCB（）{
log（“SQL执行良好”）；
}
openCB（）{
console.log（“数据库已打开”）；
}
render（）{
常量药草=this.state.record.map（（药草）=>
this.handlePressedIn（herb.id-1，herb.name）}key={herb.id}>
{herb.name}
{herb.bot}
);
const view={herbs}；
返回(
{
这个，州，加载器？
：{view}
}  ); }}

APP.js（主要组件）

import Splash from./components/Splash'；
从“反应导航”导入{createStackNavigator}；
const RootStack=createStackNavigator(
{
主页：{
屏幕：主页，
},
详情：{
屏幕：详细信息，
},
},
{
initialRouteName:“主页”，
导航选项：{
头型：{
背景颜色：“#fff”，
},
标题颜色：“#28B564”，
头饰样式：{
fontWeight:'粗体'，
},
},
}
);
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间流逝：错误，
};
}
render（）{
设置超时（（）=>{
this.setState（{timePassed:true}）
}, 4000);
如果（！this.state.timePassed）{
返回
;
}否则{
返回(
);} }}

undefined不是一个对象（评估'params.update'）：这意味着param是undefined的。我如何才能做到这一点并将函数成功地传递给Box组件您可以像这样更新导航吗

const navigateAction=NavigationActions.navigate({