Как сделать так, чтобы состояние никогда не было пустым с крючками и ожиданием? - PullRequest
Новая
       27

Как сделать так, чтобы состояние никогда не было пустым с крючками и ожиданием?

1 голос
/ 10 октября 2019

Я использую acios для извлечения данных из API и обновления значения моих хуков. Начальным значением является пустой объект. Я подумал, что если я использую «await» перед запросом axios, функция не будет запущена до получения запроса и установки новых значений.

К сожалению, это не всегда происходит, и иногда «значения» остаются пустымидаже после того, как должен был ожидаться запрос get axios.

Как мне убедиться, что значения os mever "{}" в коде? Я думал, что «ждать» должен исправить это, но это не так. 

import { Grid, Hidden } from '@material-ui/core';
import Link from '@material-ui/core/Link';
import ProjectInformation from '../../projects/components/ProjectInformation';
import axios from 'axios';

const style = {
    textAlign: 'left',
    float: 'right',
    position: 'fixed',
};

export default function ProjectPage(props) {
    const propsId = props.match.params.id;

    const [values, setValues] = useState({});
    useEffect(() => {
        getProjectById();
    }, []);

    const getProjectById = async () => {
        const { data } = await axios.get(`http://localhost:9000/projects/${propsId}`);
        setValues(data);
    };

    console.log('values are', values);

    return (
        <Grid container spacing={3}>
            <Hidden smDown>
                <Grid item sm={2}>
                    <div style={style}>
                        <Link href="#anchor1">Project Information</Link>
                        <br />
                        <Link href="#anchor2">Fieldwork Information</Link>
                        <br />
                        <Link href="#anchor3">Personell & Institutions</Link>
                        <br />
                        <Link href="#anchor4">Project Updates</Link>
                        <br />
                        <Link href="#anchor5">Datasets</Link>
                        <br />
                        <Link href="#anchor6">Publications</Link>
                    </div>
                </Grid>
            </Hidden>
            <Grid item xs={12} sm={10} style={{ borderLeft: '1px solid #dddddd' }}>
                <Grid item>
                    <div id="anchor1">
                        <ProjectInformation props={values} />
                    </div>
                </Grid>
                <Grid item>
                    <div id="anchor2">
                        <p>test</p>
                    </div>
                </Grid>
                <Grid item>
                    <div id="anchor3">
                        <p>test</p>
                    </div>
                </Grid>
                <Grid item>
                    <div id="anchor4">
                        <p>test</p>
                    </div>
                </Grid>
                <Grid item>
                    <div id="anchor5">
                        <p>test</p>
                    </div>
                </Grid>
                <Grid item>
                    <div id="anchor6">
                        <p>test</p>
                    </div>
                </Grid>
            </Grid>
        </Grid>
    );
}

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Вы можете выполнить одно из следующих действий:

data? setValues(data) : null;

или

data && setValues(data);

1 голос
/ 10 октября 2019

Насколько мне известно, всякий раз, когда компонент React загружается, если вы определяете состояние с некоторыми значениями, например: this.state = {something: "something else"};, тогда оно имеет это состояние при инициализации. Если ваши данные для состояния зависят от асинхронного запроса, исходное состояние не будет иметь этого значения, и я не думаю, что простое использование async и await предотвратит это, поскольку React не запускает код допосле монтирования компонента.

Из документов:

Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как одновременно componentDidMount, componentDidUpdate и componentWillUnmount.

...