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

Question

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

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

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

转换器组件：

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）以便在之后加载转换器提取结束，因为 "fetch" 是异步的。

场景一示例：

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

场景二示例：

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

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

Initial state of component not updating on first render

javascript

state

reactjs

redux

react-props