React-Native：按下按钮两次只会更新 this.setState

Question

该应用程序很简单.. 气体转换.. 我想做的是将 Inputed Amount 乘以 2 就好像它是公式一样。所以我有一个 index.js，它是 Parent，而 Calculate.component.js 负责所有的计算。我想要的是，index.js 会将 inputed value 传递给 component 并进行计算，然后再次将其传递给 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>
    );
  }
}

计算AVGAS/分量

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>
    );
  }
}

执行此操作后，setState 仅在按 Convert button 两次

时更新

Answer 1

您的问题是您希望在父组件中显示信息，但您将该信息保存在子组件的状态中。只需将金额和结果传递给无状态子组件 (CalculateAVGAS)。

通常最好保留子组件"dumb"（即表示性的），只传递它们需要显示的信息，以及任何需要执行的功能，作为道具。

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

export default class CalculateAVGAS extends Component {
  onPressConversion = () => {
    this.props.result(this.props.amount * 2);
  };

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

const ButtonContainer = styled.TouchableOpacity``;

const ButtonText = styled.Text``;

父组件如下所示：

import React, {Component} from 'react';
import {Text} from 'react-native';
import styled from 'styled-components';
import CalculateAVGAS from './Stack';

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: null,
    pickerFrom: false,
    pickerTo: false,
    isResult: false,
    result: null,
  };

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

  onResult = value => {
    this.setState({
      result: 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}
            result={value => this.onResult(value)}
          />
        </CalculateContainer>
      </Container>
    );
  }
}

const Container = styled.View``;

const ResultContainer = styled.View``;

const ResultText = styled.Text``;

const CalculateContainer = styled.View``;

const Input = styled.TextInput``;

React-Native：按下按钮两次只会更新 this.setState

React-Native: pressing the button twice only updates the this.setState

setstate

react-native