Question

该组件从其父组件中获取两个道具（分别为cryptos和crypto）。

我正在启动其中一个状态属性selectedCrypto，该属性负责使用this.props.crypto显示第一个输入的值。

这个想法是，当用户点击列表中的一个密码时，它应该使用所选密码的名称呈现输入，但这不会发生。道具收到罚款。我可以在组件上调试它。它会显示当前的加密，但由于某种原因，组件的状态在第一次渲染时没有得到它。

Conversor组件：

import React, {Component} from 'react';
import Select from 'react-select';
import sortBy from 'sort-by';
import numeral from 'numeral';
import styles from '../../style/css/select_style.css';

class Conversor extends Component {
    constructor(props){
        super(props);

        this.state = {
            selectedCrypto: props.crypto || {},
            cryptoToConvert: {name: 'USD'},
            amount: 0,
            result: 0
        }
    }

    updateValue (newValue) {
        let result = this.conversorFunc(this.state.amount, newValue, this.state.cryptoToConvert);
        this.setState({
            selectedCrypto: newValue,
            result
        });
    }

    updateValue2(newValue){
        let result = this.conversorFunc(this.state.amount, this.state.selectedCrypto, newValue);
        this.setState({
            cryptoToConvert: newValue,
            result
        });
    }

    converterHandler(event){

        let inputCrypto = this.state.selectedCrypto;
        let ouputCrypto = this.state.cryptoToConvert;

        let result = this.conversorFunc(event.target.value, inputCrypto, ouputCrypto);
        this.setState({result, amount: event.target.value});

    }

    conversorFunc(amount, inputCrypto, ouputCrypto){
        let result;
        if(ouputCrypto.name == 'USD'){
            result = numeral(inputCrypto.price_usd*parseInt(amount)).format('0,0.00');
        }else{
            result = numeral((inputCrypto.price_usd/ouputCrypto.price_usd)*parseInt(amount)).format('0,0.00');
        }
        return result;
    }


    render(){
        return(
            <div className='container conversor-container'>
                {console.log(this.state.selectedCrypto)}
                <h4>Currency Converter</h4>
                <div className='input-container'>
                    <input onKeyUp={this.converterHandler.bind(this)} placeholder='Enter Amount To Convert' className='amount form-control' type="text"/>
                    <div className='selectComp-div'>
                        <Select
                            name="crypto-select"
                            value={this.state.selectedCrypto}
                            onBlurResetsInput={false}
                            onSelectResetsInput={false}
                            clearable={false}
                            onChange={this.updateValue.bind(this)}
                            searchable={true}
                            options={this.props.cryptos}
                            labelKey='name'
                            valueKey='name'
                        />
                    </div>
                    <span>to</span>
                    <div className='selectComp-div'>
                        <Select
                            name="crypto-select"
                            value={this.state.cryptoToConvert}
                            clearable={false}
                            onChange={this.updateValue2.bind(this)}
                            searchable={true}
                            options={this.props.cryptos}
                            labelKey='name'
                            valueKey='name'
                        />
                    </div>
                    <div className='result-div'>
                        {this.state.amount}{this.state.selectedCrypto.name}={this.state.result}{this.state.cryptoToConvert.name}
                    </div>
                </div>
            </div>
        );
    }
}

export default Conversor;

网络应用：https://crypto-waatch.herokuapp.com/

代码：https://github.com/jorgeduardos/CryptoPrices

Answer 1

在github中查看你的代码，你应该在组件Conversor上实现componentWillReceiveProps，或者在single_crypto状态下添加一个属性（例如：isFetching），以便在获取结束后加载转换器，因为＆＃34; fetch＆＃34 ;是异步。

sceneario one的示例：

// conversor
componentWillReceiveProps (nextProps) {
    this.setState({
      selectedCrypto: nextProps.crypto,
    });
}

方案二的例子：

render () {
  // ...
  {this.state.isFetching && <Conversor cryptos={this.props.cryptos} crypto={this.props.singleCrypto}/>}
  // ...
}

组件的初始状态在第一次渲染时未更新

1 个答案: