Question

我正在尝试使用React，而我正在尝试创建一个搜索以过滤项目列表。我有两个组件，主要显示调用搜索组件的项目列表。

我有一个onChange函数，它将状态中的term设置为输入值，然后从主组件调用searchItems来过滤项目列表。由于searchItems中的某些原因，this.state未定义。我认为在搜索组件中添加bind到onInputChange会将其排序，但它没有任何区别。也许还有我缺少的东西。

主要组件

import React, { Component } from 'react';
import _ from 'lodash';

import Search from './search';

class Items extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
        };
    }

    componentDidMount() {
        fetch("[url].json")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        items: result
                    });
                }
            ),
            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                })
            }
    }

    searchItems(term) {
        const { items } = this.state;
        const filtered = _.filter(items, function(item) {
            return item.Name.indexOf(term) > -1;
        });

        this.setState({ items: filtered });
    }

    render() {
        const { error, isLoaded, items } = this.state;

        if (error) {
            return <div>Error: {error.message}</div>;
        }
        else if (!isLoaded) {
            return <div>Loading...</div>;
        }
        else {
            return (
                <div>
                    <Search onSearch={this.searchItems}/>
                    <ul>
                        {items.map(item => (
                            <li key={item.GameId}>
                                {item.Name}
                            </li>
                        ))}
                    </ul>
                </div>
            )
        }
    }
}

export default Items;

搜索组件

import React, { Component } from 'react';

class Search extends Component {
    constructor(props) {
        super(props);

        this.state = {
            term: ''
        };
    }

    render() {
        return (
            <div>
                <input type="text" placeholder="Search" value={this.state.term} onChange={event => this.onInputChange(event.target.value)} />
            </div>
        );
    }

    onInputChange(term) {
        this.setState({ term });
        this.props.onSearch(term);
    }
}

export default Search;

Answer 1

您没有在searchItems()组件中绑定Items。

尝试将其更改为箭头功能：

searchItems = () => {
  // blah
}

或以其他方式将其绑定在constructor()：

中

constructor() {
  // blah
  this.searchItems = this.searchItems.bind(this);
}

或当你打电话时。

您可以详细了解this here。

React - onChange函数＆＃39; this.state＆＃39;未定义

1 个答案: