TypeError: Cannot read properties of undefined (reading 'map') Table.render

Question

正在尝试显示已过滤的 table，但未成功，请参见下文。

阅读地图时不断出现未定义的错误，似乎无法弄清楚为什么在调用 filteredColleges.map(college)

时没有通过大学

这可能是因为我在 App.js 中调用 <Table/> 组件而忘记了基本步骤吗？

App.js 看起来像这样：

  return (
    <div className="App">
      <header className="App-header">
        <h1>Partners</h1>
        <Table/>
      </header>
    </div>
  );
}

如果有人能提供帮助，我将非常非常感激。提前致谢！

import React , {Component } from 'react'

export default class Table extends Component {

// Display API data - componentDidMount - pull specific elements - DONE
// Create table displaying API data
// Create Search bar
// Create drop down list for prefix
// Style Ofsted Rating column

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            colleges: [],
            searchByName: ""
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({ searchByName: event.target.value });
    }

    componentDidMount() {
        fetch(`https://collegesapi/data.json`)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    colleges: result.getColleges
                });
            },
            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                });
            }
        )
    }

    renderRow(college) {
        return (
            <tr key={college.id}>
                <td>{college.name}</td>
                <td>{college.groupPrefix}</td>
                <td>
                    {college.logo && (
                        <img className="w-full" src={college.logo} alt={college.name} />
                    )} 
                </td>
                <td>{college.ofstedRating}</td>
            </tr>
        )
    }

    render() {

        const filterColleges = (colleges, query) => {
            if(!query) {
                return colleges;
            }

            return colleges.filter((college) => {
                const collegeName = college.name.toLowerCase();
                return collegeName.includes(query);      
            });
        };

        const filteredColleges = filterColleges(
            this.props.colleges,
            this.state.searchByName
        );

        const { error, isLoaded, colleges } = this.state;

        if (error) {
            return <div>Error: {error.message}</div>
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return ( 
                <div>

                <table className="table-fixed border-collapse">
                        <thead>
                            <tr>
                                <input
                                    type="text"
                                    placeholder="Search partners"
                                    onChange={this.handleChange}
                                />
                            </tr>
                            <tr>
                                <th className="w-1/12">Partner</th>
                                <th className="w-1/12">Prefix</th>
                                <th className="w-1/12">Logo</th>
                                <th className="w-1/12">Ofsted Rating</th>
                            </tr>
                        </thead>
                        <tbody>{filteredColleges.map((college) => this.renderRow(college))}</tbody>
                    </table>
                </div>
            )
        }
    }
}

Answer 1

您在发送到“filterColleges”函数时引用 this.props.colleges：

const filteredColleges = filterColleges(
  this.props.colleges,
  this.state.searchByName
);

相反，由于您在从 API 响应收到时将其设置为状态，因此您应该相应地参考：

const filteredColleges = filterColleges(
  this.state.colleges,
  this.state.searchByName
);

此外，处理错误或空响应总是好的，例如，如果您的 API 不 return 甚至是空数组，那么此代码仍将抛出相同的错误。因此，您可以在这些情况下添加空合并检查 (??) 并分配空数组，如下所示：

this.setState({
        isLoaded: true,
        colleges: result?.getColleges ?? [],
      });

希望对您有所帮助！

TypeError: Cannot read properties of undefined (reading 'map') Table.render

TypeError: Cannot read properties of undefined (reading 'map') Table.render

javascript

search

reactjs