TypeError：无法读取未定义的 React js 的属性“值”答案

【问题标题】：TypeError: Cannot read property 'value' of undefined React jsTypeError：无法读取未定义的 React js 的属性“值”
【发布时间】：2021-04-29 07:14:18
【问题描述】：

当我在搜索栏搜索时出现无法读取属性值的错误，为什么会出现这个错误，之前我做了很多表格但没有出现这个错误，请告诉我为什么会出现这个错误，我应该使用材质 UI Bootstrap 的替换

音乐.js

这是我出错的 music.js 文件，我正在使用 react-hooks 来管理状态

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import RadioIcon from '@material-ui/icons/Radio';
import firebase from '../Firebase';
import SearchBar from "material-ui-search-bar";
import { useHistory } from 'react-router-dom';
import { Container, Input, TextField } from '@material-ui/core';



const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    search:{
        marginTop:30,
    },
}));

const Music = () => {

    const [search, setSearch] = useState("");

    const history = useHistory();

    const Logout = () => {
        firebase.auth().signOut().then(() => {
            alert("Logout Successfull...");
            history.push('/');
        }).catch((error) => {
            console.log(error);
        });
    }

    const classes = useStyles();

    return (
        <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                            <RadioIcon style={{ fontSize: "30px" }} />&nbsp; React Music
                    </IconButton>
                        <Typography variant="h6" className={classes.title}>
                        </Typography>
                        <Button color="inherit" onClick={Logout}> <ExitToAppIcon /> Logout </Button>
                    </Toolbar>
                </AppBar>
                <Container>
                    <SearchBar className={classes.search}
                    value={search}
                    onChange={(e)=>setSearch(e.target.value)}/>
                </Container>
                
        </div>
    );
}

export default Music;

【问题讨论】：

哪一行报错了？
第 65 行 onChange={(e)=>setSearch(e.target.value)}

标签： reactjs react-hooks material-ui

【解决方案1】：

按照documentation 中的示例，onChange 只是将新值而不是事件作为参数。

您可以像这样修复您的代码：

onChange((newValue)=>setSearch(newValue))

【讨论】：

【解决方案2】：

根据documents onChange 方法返回 newValue 因此您应该将方法更改为：

<SearchBar className={classes.search}
 value={search}
 onChange={(newValue)=>setSearch(newValue)}/>

【讨论】：