React native 反应本机：按下按钮两次仅更新this.setState

这个应用程序很简单。。天然气的转化。。我想做的是将

输入量

乘以

2

，就好像这是公式一样。因此，我有一个

index.js

，它是

父级

，还有执行所有计算的

Calculate.component.js

。我想要的是，

index.js

将一个

输入值

传递给

组件

，然后进行计算，然后再次传递给

index.js

，以显示计算出的金额

Index.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import styled from 'styled-components';
import PickerComponent from './Picker.Component';
import CalculateAVGAS from './Calculate.component';

export default class PickerAVGAS extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.getParam('headerTitle'),
    headerStyle: {
      borderBottomColor: 'white',
    },
  });

  state = {
    gasTypeFrom: 'Gas Type',
    gasTypeTo: 'Gas Type',
    input_amount: '',
    pickerFrom: false,
    pickerTo: false,
    isResult: false,
    result: '',
  };

  inputAmount = amount => {
    this.setState({ input_amount: amount });
    console.log(amount);
  };

  onResult = value => {
    this.setState({
      result: value,
    });
    console.log('callback ', value);
  };

  render() {
    return (
      <Container>
        <Input
          placeholder="Amount"
          multiline
          keyboardType="numeric"
          onChangeText={amount => this.inputAmount(amount)}
        />
        <ResultContainer>
          <ResultText>{this.state.result}</ResultText>
        </ResultContainer>
        <CalculateContainer>
          <CalculateAVGAS
            title="Convert"
            amount={this.state.input_amount}
            total="total"
            titleFrom={this.state.gasTypeFrom}
            titleTo={this.state.gasTypeTo}
            // isResult={this.toggleResult}
            result={value => this.onResult(value)}
          />
        </CalculateContainer>
      </Container>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{Text}；
从“样式化组件”导入样式化；
从“./Picker.Component”导入PickerComponent；
从“/Calculate.component”导入CalculateAVGAS；
导出默认类PickerAVGAS扩展组件{
静态导航选项=（{navigation}）=>({
标题：navigation.getParam（'headerTitle'），
头型：{
边框底部颜色：“白色”，
},
});
状态={
gasTypeFrom:“气体类型”，
gasTypeTo:“气体类型”，
输入金额：“”，
pickerFrom:false，
皮克托：错，
结果：错，
结果：“”，
};
输入量=金额=>{
this.setState（{input_amount:amount}）；
控制台日志（金额）；
};
onResult=value=>{
这是我的国家({
结果：价值，
});
log（'callback'，值）；
};
render（）{
返回(
此.inputAmount（数量）}
/>
{this.state.result}
this.onResult（值）}
/>
);
}
}

计算气体/成分

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

export default class CalculateAVGAS extends Component {
  static propTypes = {
    amount: PropTypes.string.isRequired,
    titleFrom: PropTypes.string.isRequired,
    titleTo: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  };

  state = {
    totalVisible: true,
    result: '',
  };

  onPressConversion = () => {
    const formula = this.props.amount * 2;
    const i = this.props.result(this.state.result);
    this.setState({ result: formula });
    // console.log(this.state.result);
    console.log('func()');
  }

  render() {
    return (
      <ButtonContainer onPress={() => this.onPressConversion()}>
        <ButtonText>{this.props.title}</ButtonText>
      </ButtonContainer>
    );
  }
}

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“样式化组件”导入样式化；
导出默认类CalculateAVGAS扩展组件{
静态类型={
金额：PropTypes.string.isRequired，
标题来源：PropTypes.string.isRequired，
titleTo:PropTypes.string.isRequired，
标题：PropTypes.string.isRequired，
};
状态={
是的，
结果：“”，
};
onPressConversion=（）=>{
常量公式=this.props.amount*2；
const i=this.props.result（this.state.result）；
this.setState（{result:formula}）；
//console.log（this.state.result）；
log（'func（）'）；
}
render（）{
返回(
此.onPressConversion（）}>
{this.props.title}
);
}
}

---

执行此操作后，

设置状态

仅在两次按下

转换按钮时更新
此处的问题是您希望在父组件中显示信息，但将该信息保存在子组件的状态。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

export default class CalculateAVGAS extends Component {
  static propTypes = {
    amount: PropTypes.string.isRequired,
    titleFrom: PropTypes.string.isRequired,
    titleTo: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  };

  state = {
    totalVisible: true,
    result: '',
  };

  onPressConversion = () => {
    const formula = this.props.amount * 2;
    const i = this.props.result(this.state.result);
    this.setState({ result: formula });
    // console.log(this.state.result);
    console.log('func()');
  }

  render() {
    return (
      <ButtonContainer onPress={() => this.onPressConversion()}>
        <ButtonText>{this.props.title}</ButtonText>
      </ButtonContainer>
    );
  }
}

只需将amount和result传递给无状态子组件（CalculateAVGAS）

通常最好让子组件保持“哑巴”（即呈现），只传递它们需要显示的信息以及需要执行的任何功能作为道具


import React，{Component}来自'React'；
从“样式化组件”导入样式化；
导出默认类CalculateAVGAS扩展组件{
onPressConversion=（）=>{
本道具结果（本道具金额*2）；
};
render（）{
返回(
此.onPressConversion（）}>
{this.props.title}
);
}
}
const ButtonContainer=已设置样式。可触摸不透明度``；
const ButtonText=styled.Text`
我希望我可以，但需要更多15个声誉来提升投票：/I明白了：（但是我确实认为您可以通过单击upvote/downvote按钮下方的复选标记来接受答案。