无法读取 null 的属性“indexOf”，预计是反应生命周期问题

Question

我从发送 JSON 数据的本地 API 服务器获取了用户数据，并且在我添加搜索功能之前它就可以工作了。我认识到这些错误发生的问题来自React的生命周期风格，但是因为我对React研究的不多，所以我提出问题来与您解决这个问题。macOS Mojave、Express.js、React.js 和 React-Router 正在运行我的本地开发服务器。我以前从未尝试过此搜索功能。这些是我的代码：用户列表.js：import React, {Component} from 'react';import {List, Avatar, Button, Modal, Input} from 'antd';import UserItem from "../components/UserItem";import blue_check from '...';const {Search} = Input;class UsersList extends Component {    state = {        users: [],        modalVisible: false,        dataKey: 0,        keyword: '',    };    constructor(props) {        super(props);        this.state = {            users: [{                member_idx: 0,                nickname: 'loading...',            }]        };    }    componentDidMount() {        fetch('/api/getUsers')            .then(res => res.json())            .then(users => this.setState({users: users}));    }    showModal = (key) => {        this.setState({            modalVisible: true,            dataKey: key        });    };    handleClose = e => {        console.log(e);        this.setState({            modalVisible: false        });    };    handleSearch = (e) => {        this.setState({            keyword: e.target.value,        })    };    render() {        const {users, keyword} = this.state;        const filteredUsers = users.filter(            user => user.nickname.indexOf(keyword) !== -1        ); // This line makes error        return (            <div>                <Search                    placeholder="Input Search Text"                    enterButton="Search"                    onSearch={value => this.state.handleSearch(value)}                    size="large"                />UserItem.js 在这篇文章中不需要，因为它没有关于这个错误的问题。

Answer 1

nickname对于一个或多个用户，您的数据可能为空，因此您应该在过滤时也进行检查

     const filteredUsers = users.filter(

        user => user.nickname && user.nickname.indexOf(keyword) !== -1

    );