Cannot read 属性 'indexOf' of null，估计是react生命周期问题

Question

我已经从发送 JSON 数据的本地 API 服务器获取了用户数据，并且在我添加搜索功能之前它已经工作了。我从 React 的生命周期样式中认识到这些错误发生的问题，但是因为我对 React 的研究不多，所以我提出问题来解决这个问题。

macOS Mojave、Express.js、React.js 和 React-Router 是运行我的本地开发服务器。我以前从未尝试过这个搜索功能。

这些是我的代码：

UsersList.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"
                />
                <List
                    itemLayout="horizontal"
                    dataSource={filteredUsers}
                    renderItem={item => (
                        <List.Item
                            actions={[<a onClick={() => this.showModal(item.member_idx)}>상세정보</a>, <a>이 프로필을...</a>]}>
                            <List.Item.Meta
                                style={{
                                    display: 'flex',
                                    alignItems: 'center'
                                }}
                                avatar={<Avatar src={item.image}/>}
                                title={
                                    <span>{item.nickname === null ? "<undefined>" : item.nickname} {item.blue_check === 1 &&
                                    <img src={blue_check} alt="BLUE" style={{height: '16px'}}/>
                                    }</span>}
                                description={
                                    <span><strong>{item.follow_count}</strong> Follower{item.follow_count !== 1 && "s"}</span>}
                            />
                        </List.Item>
                    )}
                />
                <Modal
                    title="상세 정보"
                    visible={this.state.modalVisible}
                    onClose={this.handleClose}
                    footer={[
                        <Button key="back" onClick={this.handleClose}>
                            닫기
                        </Button>
                    ]}
                    centered
                >
                    <UserItem dataKey={this.state.dataKey} users={this.state.users}/>
                </Modal>
            </div>
        );
    }
}

export default UsersList;

UserItem.js 在这个 post 中不需要，因为它没有关于这个错误的问题。

I linked the error trace image here. Sorry about inconvenience.

Answer 1

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

     const filteredUsers = users.filter(
        user => user.nickname && user.nickname.indexOf(keyword) !== -1
    );

Cannot read 属性 'indexOf' of null，估计是react生命周期问题

Cannot read property 'indexOf' of null, be expected to be react lifecycle problem

javascript

lifecycle

reactjs