Question

我对React和Firestore有点陌生，已经尝试找出几个小时后发生的情况。我尝试使我的过滤器功能处理从APP.js中从Firestore接收的数据。我将数据{tasks，searchTerm}传递给DASHBOARD组件。过滤器在使用state和props之前工作，但是在用firestore数据替换了state中的硬编码数据之后，它不再起作用，并且在DASHBOARD组件中过滤数组时出现以下错误： 无法读取未定义的属性“ toLowerCase”

我尝试将没有任何过滤的数据直接发送到TASKS.js，并且此操作正常（显示了所有任务）。但是，一旦我将newArray传递给，它将不再起作用。

此外，当在DASHBOARD组件的task.filter函数中记录task.title时，它会显示所有数据（由于数据来自Firestore而稍有延迟）

APP.JS-

import React, { Component } from 'react';
import './App.css';
import Dashboard from './Components/Dashboard/Dashboard'
import AddTask from './Components/Tasks/Task/AddTask'
import Navbar from './Components/Navbar/Navbar'
import Searchbar from './Components/Searchbar/Searchbar'
import firebase from './Firebase';

class App extends Component {
  constructor(props) {
    super(props)
    this.ref = firebase.firestore().collection('tasks')
    this.state = {
      tasks: [],
      searchTerm: ""
    }

    this.handleLikeButton = this.handleLikeButton.bind(this)
    this.handleRemoveButton = this.handleRemoveButton.bind(this)
    this.addTask = this.addTask.bind(this)
    this.handleFilter = this.handleFilter.bind(this)
  }

  componentWillMount() {
    const db = firebase.firestore()
    const allTasks = []
    db.collection('tasks').onSnapshot(collection => {
       const tasks = collection .docs.map(doc => doc.data())
       this.setState({ tasks: tasks, searchTerm: "" })
    })
  }

  handleLikeButton = (task) => (e) => {
    const tasks = [...this.state.tasks]
    const index = tasks.indexOf(task)
    tasks[index].likes++
    this.setState({
      tasks: tasks
    })
  }

  addTask = (taskName) => (e) => {
    this.ref.add({
      id: Math.floor(Math.random() * 100000000000000),
      title: taskName,
      likes: 0
    })
  }

  handleRemoveButton = (removingTask) => (e) => {
    const tasks = [...this.state.tasks]
    const newTasks = tasks.filter(task => removingTask.id !== task.id)
    this.setState({
      tasks: newTasks
    })
  }


  handleFilter = (searchTerm) => {
    this.setState({
      searchTerm: searchTerm
    })
  }

  render() {
    return (
      <div className="App">
        <Navbar />
        <Searchbar handleFilter={this.handleFilter} />
        <AddTask addTask={this.addTask} />
        <Dashboard tasks={this.state.tasks} searchTerm={this.state.searchTerm} handleLikeButton={this.handleLikeButton} handleRemoveButton={this.handleRemoveButton}/>
      </div>
    );
  }
}

export default App;

DASHBOARD.JS-

import React, { Component } from 'react'
import Tasks from '../Tasks/Tasks'

class Dashboard extends Component {
  constructor(props) {
    super(props)

    this.filterTasks = this.filterTasks.bind(this)
  }

  filterTasks = () => {
      const tasks = [...this.props.tasks]
      const newArray = tasks.filter(task =>
        task.title.toLowerCase().indexOf(this.props.searchTerm.toLowerCase()) > -1)
      return (
        <Tasks tasks={newArray} handleLikeButton={this.props.handleLikeButton} handleRemoveButton={this.props.handleRemoveButton}  />
      )
  }

  render() {
    return (
      <div>
        <h2>Dashboard</h2>
        {this.filterTasks()}
      </div>
    )
  }
}


export default Dashboard

ADDTASK.JS

import React, { Component } from 'react'

class AddTask extends Component {

  constructor(props) {
    super(props)

    this.state = {
      addNewTaskFieldEmpty: true,
      taskName: ""
    }

    this.onChangeHandler = this.onChangeHandler.bind(this)
    this.disableButton = this.disableButton.bind(this)
  }


  onChangeHandler(e) {
    this.setState({
      taskName: e.target.value,
    })
    this.disableButton(e.target.value)
  }

  disableButton(taskName) {
    if(taskName.length == 0) {
      this.setState({addNewTaskFieldEmpty: true})
    } else {
      this.setState({addNewTaskFieldEmpty: false})
    }
  }


  render() {
    return (
      <div>
        <div className="mdc-text-field half-size">
          <input className="mdc-text-field__input " onChange={this.onChangeHandler}  />
          <div className="mdc-line-ripple"></div>
          <label className="mdc-floating-label">Task Name</label>
        </div>
        <a className={"btn-floating btn-large waves-effect waves-light red " + (this.state.addNewTaskFieldEmpty ? 'disabled' : '')} onClick={this.props.addTask(this.state.taskName)}><i className="material-icons">add</i></a>
      </div>
    )
  }
}

export default AddTask

Answer 1

为您的App.css涂上任何错误。

我遇到了此消息。我将其追溯到CSS包括：

.box-table { border-color:; border: 1px solid #dbdad8; }

border-color:的缺失值导致npm run build失败。

有趣的是，其中包含相同的文件

.submenu-button.submenu-opened:after { background:; }

完全没有问题。

无法读取未定义的属性“ toLowerCase”-REACT-FIRESTORE

1 个答案: