Я новичок в React JS и медленно провожу свой путь, но столкнулся с проблемами, которые, как мне показалось, я бы хотел задать здесь.

У меня есть компонент, который является контейнером состояния и всех данных, которые мне нужны

class PirateContainer extends Component {
constructor(props) {
    super(props);
    this.state = {
        PirateCaptains: [],
        Year: [],
        Ship: [],

        PirateChoices: {
            SelectedYear : "",
            SelectedPirateCaptain : "",
            SelectedShip : ""
        }
    };
    this.handleYearChange = this.handleYearChange.bind(this);
    this.handleShipChange = this.handleShipChange.bind(this);
    this.handlePirateCaptainChange = this.handlePirateCaptainChange.bind(this);
}     

popYear(accessLevel){
    fetch('https://Pirateman/api/Years').then(response => {
        return response.json();             
        })
        .then((json) => {                
            this.setState(
                prevState => ({
                Year: json,
                Choices: {
                    ...prevState.PirateChoices,
                    SelectedYear: json[0]
                }
            }), () => {                    
                console.log(this.state);}
            );
        });            
    }



popCaptain({
    fetch('https://Pirateman/api/PirateCaptains').then(response => {
        return response.json();             
        })
        .then((json) => {                
            this.setState(
                prevState => ({
                PirateCaptain: json,
                PirateChoices: {
                    ...prevState.PirateChoices,
                    SelectedPirateCaptain: json[0]
                }
            }), () => {console.log(this.state);}
            );
        });            
    }

popShip(year, captain){            
    fetch('https://Pirateman/api/Ships/' + year + '/' + captain ).then(response => {
        return response.json();             
        })
        .then((json) => {                
            this.setState(
                prevState => ({
                Ship: json,
                PirateChoices: {
                    ...prevState.PirateChoices,
                    SelectedShip: json[0]
                }
            }), () => {console.log(this.state);}
            );
        });            
    }



handleYearChange(e) {
    let value = e.target.value;        
    if(this.state.PirateChoices.SelectedYear === value)
    {
        console.log('Do nothing')
    }
    else
    {
        this.setState(
            prevState => ({
                    PirateChoices: {
                        ...prevState.PirateChoices,
                        SelectedYear: value
                    }
        }), () => {console.log(this.state)}
        );
    }
}

handlePirateCaptainChange(e) {        
    let value = e.target.value;
    if(this.state.PirateChoices.SelectedPirateCaptain === value)
    {
        console.log('Do nothing')
    }
    else
    {
    this.setState(
        prevState => ({
                PirateChoices: {
                    ...prevState.PirateChoices,
                    SelectedPirateCaptain: value
                }
    }), () => {console.log(this.state)}
    );
}
}

handleShipChange(e) {        
    let value = e.target.value;
    if(this.state.PirateChoices.SelectedShip === value)
    {
        console.log('Do nothing')
    }
    else
    {
    this.setState(
        prevState => ({
                PirateChoices: {
                    ...prevState.PirateChoices,
                    SelectedShip: value
                }
    }), () => {console.log(this.state)}
    );
}
}

У меня есть универсальный компонент, который загружает форму выбора, которая принимает функцию изменения и запускает обмен.

Поэтому первое, что делает приложение, это получает Years и PirateCaptains из службы и устанавливает их состояние (а также Selected Ship и PirateCaptain, которые являются первой записью показанного массива). При изменении выбранное обновляется.

У меня проблема в том, что данные корабля зависят от комбинации SelectedPirateCaptain и SelectedYear.

Я чувствую, что простой способ заполнения - это вызвать изменение любого из этих двух свойств, но я не могу придумать, как настроить функцию для этого.

Я также пытался (для начальной загрузки) использовать обещания или обратные вызовы, но не могу понять, как заставить его ждать, пока состояние обоих выбранных свойств не будет иметь значения. (Я пробовал цикл while, но функция никогда не получает состояние со значением.)

Любая помощь очень ценится заранее, я подозреваю, что я идиот и упускаю что-то очевидное, поэтому заранее спасибо.

0
Ivan S