时间戳

首页 > 解决方案 > 刷新后 React.js 道具变为未定义

reactjs - 刷新后 React.js 道具变为未定义

问题描述

我正在从 firebase 数据库中提取 1000 多个关键字的庞大列表，并将其从 App.js 传递到创建自动完成搜索栏的组件。道具一开始是完美的通行证。我什至做了一个“console.log(props.keywords[30].keyword);” 我得到一个特定的关键字，它在控制台中完全按照我想要的方式显示。稍后在关键字组件的代码中，我尝试再次引用关键字，但是当我刷新页面以确保一切正常时，它显示“TypeError：无法读取未定义的属性'关键字'”。在我在浏览器上刷新之前它正在工作。我只是想这样做，以便我可以提取用户预定义的一些关键字并将它们设置为 userOptions 以在页面加载时成为芯片，然后用户可以根据需要选择更多关键字或删除他们预定义的关键字。但不知何故，它变得不确定。提前致谢。

来自 Chrome 的更多错误：

  17 | function Keywords(props) {
  18 |  const classes = useStyles();
  19 | 
> 20 |  console.log(props.keywords[30].keyword);
  21 | 
  22 |  //const allOptions = [props.keywords[6]];
  23 |  const userOptions = [props.keywords[6]];

这是组件的完整代码：

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        '& > * + *': {
            marginTop: theme.spacing(3),
        },
        paddingBottom: '8px',
    },
}));

function Keywords(props) {
    const classes = useStyles();

    console.log(props.keywords[30].keyword);

    //const allOptions = [props.keywords[6]];
    const userOptions = [props.keywords[6]];
    const [value, setValue] = React.useState([...userOptions, props.keywords[13]]);

    return (
        <div className={classes.root}>
            <Autocomplete
                multiple
                id="fixed-tags-demo"
                value={value}
                onChange={(event, newValue) => {
                    setValue([...newValue]);
                }}
                options={props.keywords}
                getOptionLabel={(option) => option.keyword}
                freeSolo
                renderTags={(tagValue, getTagProps) => tagValue.map((option, index) => <Chip label={option.keyword} {...getTagProps({ index })} />)}
                renderInput={(params) => <TextField {...params} variant="outlined" label="Keywords" placeholder="Roles, Locations, Etc." />}
            />
        </div>
    );
}

export default Keywords;

标签： reactjsmaterial-uiundefinedreact-props

解决方案

添加到我的评论：

数据未在Keywords组件的第一次渲染时完全加载。处理此问题的反应方式是在您的组件中构建早期返回并返回 null，以便不呈现任何内容或使用类似的钩子useMemo来计算value? . You can pass a dependency array to useMemo`，并且它会在依赖项发生变化时重新计算函数。

我认为在这种情况下使用钩子是适合你的方法。在其中，您可以处理尚未加载数据的情况，而是返回一些安全的默认值。

推荐阅读