javascript - ReactNative) 关于调用在 render() 中引用数据的函数的问题

Question

程序流程如下：

Home.js => Add.js => Detail.js => 重复...

1. Home.js列出帖子。

2. Add.js是用于输入帖子所需数据的页面。从Home.js浏览堆栈导航

3. Detail.js会将在Add.js中输入的数据作为参数接管，向您显示要完成的帖子的信息，然后按Done按钮移动到Home.js。

4. Home.js包含已完成的帖子。

如果创建了一个帖子，eatObject会被分配一个来自Detail.js的对象。

Const { eatObject } = this.props.route?params || {};

在Home.js中， state 有一个对象数组toEats。将eatObject添加到对象列表

{Object.values(toEats).map(toEat =toEat.id toEat.idToEat key={toEat.id} {...toEat} deleteToEat={this._deleteToEat} />)}

目前，每当添加帖子时，刷新按钮都会更新“Home.js”列表。但我希望在上传“Home.js”时自动更新帖子列表。我试图在“componentDidMount”中调用“_pushToEat”，但“render”中存在“eatObject”，因此似乎无法将其交给参数。我想在上传“Home.js”的组件时自动调用“_pushTooEat”。

主页.js

import React from "react";
import { View, Text, Button } from "react-native";
import ToEat from "./ToEat"

export default class Home extends React.Component {
  state = {
    toEats:{}
  }
  render() {
    const { toEats } = this.state;
    const { eatObject } = this.props.route?.params || {};
    // error
    // if (eatObject) {    
    //   () => this._pushToEat(eatObject)
    // }

    return (
      <View>
        {Object.values(toEats).map(toEat => <ToEat key={toEat.id} {...toEat} deleteToEat={this._deleteToEat} />)}
        <Button title="refresh" onPress={()=>this._pushToEat(eatObject)}/> 
        <View>
          <Button title="Add" onPress={() => this.props.navigation.navigate("Add")} />
        </View>
      </View>
    );
  }
  _deleteToEat = () => {

  }
  _pushToEat = (eatObject) => {
    console.log("function call!")
    console.log(eatObject)
    this.setState(prevState => {
      const newToEatObject = eatObject
      const newState = {
        ...prevState,
        toEats: {
          ...prevState.toEats,
          ...newToEatObject
        }
      }
      return { ...newState };
    })
  }
}

细节.js

import React from "react";
import { View, Text, Button } from "react-native";
import uuid from 'react-uuid'
import { connect } from 'react-redux';
import { inputId } from '../src/reducers/infoReducer';

class Detail extends React.Component {
    render() {
        const { name, dosage, note } = this.props.route.params;
        return (
            <View>
                <Text>name: {name}</Text>
                <Text>dosage: {dosage}</Text>
                <Text>note: {note}</Text>

                <Button
                    title="Done"
                    onPress={() =>
                        this.props.navigation.navigate(
                            "Home", {
                            eatObject: this._createToEat(uuid(), name, dosage)                
                        })
                    }
                />
            </View>
        )
    }
    _createToEat = (id, name, dosage) => {
        const ID = id
        inputId(id)
        const newToEatObject = {
            [ID]: {
                id: ID,
                name: name,
                dosage: dosage,
            }
        }
        return newToEatObject;
    }
}

function mapStateToProps(state) {
    return {
        state: state.infoReducer
    };
}
function matchDispatchToProps(dispatch) {
    return {
        inputId: (id) => {
            dispatch(inputId(id));
        },
    }
}
export default connect(mapStateToProps, matchDispatchToProps)(Detail);

我想要你的建议。谢谢

标签： javascriptreactjsreact-native