Ich habe versucht, Daten aus zwei Quellen in componentDidMount abzurufen, und die URL der zweiten Komponente basiert auf den Daten, die von der ersten Komponente abgerufen wurden, aber es sieht so aus, als ob der Status in ComponenDidMount nicht "aktualisiert" wird. Ich habe versucht, es mit fetchDuel () im Konstruktor zu beheben, ohne Glück. Irgendwelche Vorschläge? Danke im Voraus!

class DuelDetail extends React.Component {
    state = {
        duel: [],
        dataset: null
    };


    fetchDuel = () => {
        const duelID = this.props.match.params.duelID;
        axios.get(`http://127.0.0.1:8000/api/duel/${duelID}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    duel: res.data
                });
            });
    };

    fetchDataset = () => {
        axios.get(`http://127.0.0.1:8000/api/dataset/${this.state.duel.dataset}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    dataset: res.data
                });
            });
    };


    componentDidMount() {
        this.fetchDuel()
        this.fetchDataset()
    }
0
maslak 18 Jän. 2019 im 20:47

3 Antworten

Beste Antwort

Rufen Sie einfach die zweite Funktion im then() Block des ersten auf und übergeben Sie die Daten als Parameter. setState ist asynchron, sodass Sie sich nicht darauf verlassen können, dass die Daten sofort festgelegt werden.

fetchDuel = () => {
        const duelID = this.props.match.params.duelID;
        axios.get(`http://127.0.0.1:8000/api/duel/${duelID}`,
            {'headers': {'Authorization': `Token                                ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    duel: res.data
                });
                this.fetchDataset(res.data);
            });
    };
2
Chase 18 Jän. 2019 im 17:54

Da die beiden Aktionen asynchron sind, müssen Sie entsprechend damit umgehen.

Axios erhält ein Versprechen zurück. Sie können also die zweite Aktion im Then-Block der ersten Aktion aufrufen.

Außerdem ist setState eine asynchrone Aktion (sie wird in die Warteschlange gestellt und nicht sofort ausgelöst). Verwenden Sie die von der ersten Aktion empfangenen Daten in ihrem Block und übergeben Sie sie an die zweite Aktion

1
varoons 18 Jän. 2019 im 17:53

Rufen Sie einfach die zweite Funktion im .then() der ersten Funktion mit den Daten aus der Antwort auf. Beispiel:

class DuelDetail extends React.Component {
    state = {
        duel: [],
        dataset: null
    };


    fetchDuel = () => {
        const duelID = this.props.match.params.duelID;
        axios.get(`http://127.0.0.1:8000/api/duel/${duelID}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    duel: res.data
                });
                
                this.fetchDataset(res.data.dataset) 
                // pass whatever property you get from the response here.
            });
    };

    fetchDataset = (datasetId) => {
        axios.get(`http://127.0.0.1:8000/api/dataset/${datasetId}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    dataset: res.data
                });
            });
    };


    componentDidMount() {
        this.fetchDuel()
    }
0
Max 18 Jän. 2019 im 17:57