如何使用钩子和等待确保状态永远不会为空？答案

【问题标题】：How to make sure that state is never empty with hooks and await?如何使用钩子和等待确保状态永远不会为空？
【发布时间】：2019-10-10 14:10:59
【问题描述】：

我正在使用 acios 从 API 获取数据并更新我的钩子的值。初始值设置为空对象。我认为如果我在 axios 请求之前使用“等待”，那么在获取请求并设置新值之前，该函数将不会进行。

不幸的是，这并不总是发生，即使在 axios get-request 应该等待之后，“值”有时仍为空。

如何确保代码中的值 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>
    );
}

【问题讨论】：

这应该会有所帮助：if(data){ setValues(data); }
一切看起来都很可靠，你能不能创建一个 jsfiddle 来模拟这个问题？

标签： reactjs axios react-hooks

【解决方案1】：

据我所知，每当一个 React 组件被引导时，如果您使用一些值定义状态，即：this.state = {something: "something else"};，那么它在初始化时就具有该状态。如果您的状态数据取决于异步请求，则初始状态不会具有该值，我认为仅使用 async 和 await 不会阻止这种情况，因为 React 直到运行代码在组件挂载之后。

来自文档：

如果你熟悉 React 类生命周期方法，你可以把 useEffect Hook 想象成 componentDidMount， componentDidUpdate 和 componentWillUnmount 组合在一起。

【讨论】：

【解决方案2】：

您可以执行以下任一操作：

data? setValues(data) : null;

或

data && setValues(data);

【讨论】：