Question

我从 firebase 数据库中提取了 1000 多个关键字的庞大列表，并将其从 App.js 传递到创建自动完成搜索栏的组件。道具一开始是完美通过的。我什至做了一个“console.log(props.keywords[30].keyword);”我得到了一个特定的关键字，它完全按照我想要的方式在控制台中显示。稍后在关键字组件的代码中，我尝试再次引用关键字，但是当我刷新页面以确保一切正常时，它显示“类型错误：无法读取未定义的属性‘关键字’”。在我在浏览器上点击刷新之前它正在工作。我只是想这样做，以便我可以提取用户预定义的一些关键字，并将它们设置为 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;

Answer 1

尝试对道具使用 props && yourLogic... 或任何其他类型的安全防护反应有时会出现在第一次渲染时没有可用道具的问题（恕我直言）

Answer 2

添加到我的评论中：

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

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

Answer 3

对我来说，答案还包括为 arrayObj 加载和添加额外的条件，并将其添加到我的 isLoading 微调器条件中。 react对此有一些比我能解释得更好的东西，但这篇文章让我研究了这一点并且它奏效了。 https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

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

3 个答案: