Javascript React.js未捕获键入错误tolowercase（）函数

从“React”导入React；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./component/SearchBar”导入搜索栏；
从“./component/UserList”导入用户列表；
从“./component/AddUser”导入AddUser；
类应用程序扩展了React.Component{
状态={
用户：[
],
搜索查询：“
}
异步组件didmount（）{
这是getUsers（）；
}
异步getUsers（）{
const response=等待axios.get（“http://localhost:3004/users");
//控制台日志（响应）；
this.setState（{users:response.data}）
}
deleteUser=async（用户）=>{
axios.delete(`http://localhost:3004/users/${user.id}`）
const newUserList=this.state.users.filter(
m=>m.id！==user.id
)
this.setState（state=>({
用户：newUserList
}))
}
searchUser=（事件）=>{
this.setState（{searchQuery:event.target.value}）
}
addUser=async（user）=>{
等待axios.post(`http://localhost:3004/users/`，用户）
this.setState（state=>({
用户：state.users.concat（[user]）
}))
这是getUsers（）；
}
render（）{
让filteredUsers=this.state.users.filter(
（用户）=>{
返回user.name.toLowerCase（）.indexOf（this.state.searchQuery.toLowerCase（））！=-1
}
).排序（（a，b）=>{
返回a.idb.id-1:0；
});
返回(
(
)} > 
(
{this.addUser（用户）
history.push（“/”}}
/>)} /> 
)
}
}
导出默认应用程序如果用户数组为空，则user.name将未定义，user.name.toLowerCase（）将抛出错误

所以你可以这样做，通过加入？问号

user?.name?.toLowerCase()?.indexOf(this.state.searchQuery?.toLowerCase()) !== -1

最终代码可以是这样的

let filteredUsers = this.state.users.filter(
            (user) => user?.name?.toLowerCase()?.indexOf(this.state.searchQuery?.toLowerCase()) !== -1 )

filteredUsers = filteredUsers.length > 1 ? filteredUsers.sort( (a, b) => {
            return a.id < b.id ? 1 : a.id > b.id ? -1 : 0;
        }) : filteredUsers //only sort if more than 1

让filteredUsers=this.state.users.filter(
（user）=>user？.name？.toLowerCase（）？.indexOf（this.state.searchQuery？.toLowerCase（））！=-1）
filteredUsers=filteredUsers.length>1？filteredUsers.sort（（a，b）=>{
返回a.idb.id-1:0；
})：filteredUsers//仅当大于1时进行排序
这个问题的一个解决方案是用一个简单的
if
语句或
三元
运算符包装使用
用户
对象的所有代码。您希望这样做的原因是，如果
user
对象在没有默认值的情况下启动，它将被视为空对象，因此使用
user.name
将是未定义的，您可能已经注意到了这一点，因为您遇到了一个错误

深入了解React，您会注意到
componentDidMount
在组件装载到
DOM
后运行（您在正确的位置获取数据！！）。这意味着
render
函数中的所有代码都将在填充
用户
对象之前运行，这就是产生错误的原因。因此，要解决此问题，您可以执行以下操作：

// Start of the ternary operator.
// If the user object is not empty, the code after the '?' and before the ':' will
// be executed. If the object is empty, then 'null' will be returned causing you 
// to not be given an error.
user ? 
 let filteredUsers = this.state.users.filter((user) => {
    return ( 
        user.name.toLowerCase().indexOf(this.state.searchQuery.toLowerCase()) !== -1
      )}
      ).sort( (a, b) => {
         return a.id < b.id ? 1 : a.id > b.id ? -1 : 0;
 })
: null
// You can replace null with any value that you like, or you can keep it null.

//三元运算符的开始。
//如果用户对象不是空的，“？”后面和“：”前面的代码将
//被处决。如果对象为空，则将返回“null”，从而导致
//不被给予错误。
用户？
让filteredUsers=this.state.users.filter（（用户）=>{
报税表（
user.name.toLowerCase（）.indexOf（this.state.searchQuery.toLowerCase（））！=-1
)}
).排序（（a，b）=>{
返回a.idb.id-1:0；
})
：null
//您可以用您喜欢的任何值替换null，也可以将其保持为null。

因此，为了总结这个答案，如果您想使用您知道可能并不总是定义的数据，请使用三元运算符或
if
语句来总结您使用数据的地方。


从“React”导入React；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./component/SearchBar”导入搜索栏；
从“./component/UserList”导入用户列表；
从“./component/AddUser”导入AddUser；
从“./component/EditUser”导入EditUser；
类应用程序扩展了React.Component{
状态={
用户：[]，
搜索查询：“
}
异步组件didmount（）{
这个。getMovies（）；
}
异步getMovies（）{
const response=等待axios.get（“http://localhost:3004/users");
this.setState（{users:response.data}）；
}
deleteUser=async（用户）=>{
axios.delete(`http://localhost:3004/users/${user.id}`）
const newUserList=this.state.users.filter(
m=>m.id！==user.id
)
this.setState（state=>({
用户：newUserList
}))
}
searchUser=（事件）=>{
this.setState（{searchQuery:event.target.value}）
}
addUser=async（user）=>{
等待axios.post(`http://localhost:3004/users/`，用户）
this.setState（state=>({
用户：state.users.concat（[user]）
}))