无法读取 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对于一个或多个用户，您的数据可能为空，因此您应该在过滤时也进行检查&nbsp; &nbsp; &nbsp;const filteredUsers = users.filter(&nbsp; &nbsp; &nbsp; &nbsp; user => user.nickname && user.nickname.indexOf(keyword) !== -1&nbsp; &nbsp; );