React native React Native：将状态从子组件更新到父组件，然后在第二个组件上传递更新的道具

我试图在第二个配方组件更新状态时更改道具的值

我试着用定时器，警报。但我也有问题

应用程序js：

import React, { Component } from "react";
import Recipe from "./Recipe";
import {Text, View } from "react-native";


export default class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "Pancaces",
      isYummy: true
    };
  }

  update = (s) => {
     this.setState({name : s.name, isYummy: s.isYummy });
  }

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Recipe update={this.update} name={this.state.name} isYummy={this.state.isYummy}  delay={false}/>
        <Text>{this.state.name}</Text>
        <Recipe name={this.state.name} isYummy={this.state.isYummy} delay={true}/>

      </View>
    );
  }
}

import React，{Component}来自“React”；
从“/Recipe”导入配方；
从“react native”导入{Text，View}；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“煎饼”，
是的
};
}
更新=（s）=>{
this.setState（{name:s.name，isYummy:s.isYummy}）；
}
render（）{
返回(
{this.state.name}
);
}
}

Recipe.js

import React, * as react from "react";
import PropTypes from "prop-types";
import { Text, View } from "react-native";
import styles from "./styles.js";

export default class Recipe extends react.Component{

  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  };


  constructor(props){
      super(props)
      this.state = {
          update : this.update,
          name : this.props.name,
          isYummy: this.props.isYummy
      }
      if(this.props.update) this.props.update(({name:'Lentils', isYummy:false}))

  };



  render() {


    return (

      <View style={styles.container}>
        <Text  style={styles.text_container} >{this.state.name}</Text>
        {this.state.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>

    );
  }
}

导入React，*作为“React”的React；
从“道具类型”导入道具类型；
从“react native”导入{Text，View}；
从“/styles.js”导入样式；
导出默认类Recipe扩展react.Component{
静态类型={
名称：PropTypes.string.isRequired，
isYummy:PropTypes.bool.isRequired
};
建造师（道具）{
超级（道具）
此.state={
更新：this.update，
名称：this.props.name，
isYummy:this.props.isYummy
}
if（this.props.update）this.props.update（（{name:'lentls'，isYummy:false}））
};
render（）{
返回(
{this.state.name}
{this.state.isYummy？这个食谱很好吃：null}
);
}
}

电流输出为：

煎饼 这个食谱很好吃 扁豆 烙饼 这个食谱很好吃

我期望产量

煎饼 这个食谱很好吃 扁豆 扁豆

---

已解决

我认为发生这种情况是因为您试图显示来自您的状态的值，而不是您的道具，并且由于更新后未再次调用构造函数，因此不会重新分配您的状态。下面是我要做的：

//Recipe.js

constructor (props) 
{
    super(props);

    if (this.props.update) 
        this.props.update(({name:'Lentils', isYummy:false}));
}

render()
{
    return (
        <View style={styles.container}>
            <Text  style={styles.text_container}> 
                {this.props.name}
            </Text>
        {this.props.isYummy &&
            <Text>
                THIS RECIPE IS YUMMY
            </Text>
        }
      </View>
    );
}

//Recipe.js
建造师（道具）
{
超级（道具）；
如果（此.props.update）
update（{name:'lentls'，isYummy:false}）；
}
render（）
{
返回(
{this.props.name}
{this.props.isYummy&&
这个食谱很好吃
}
);
}