Question

我正在编写一个React程序，其中数据将通过API提取并显示在表格中。有3个主要文件App.js，Table.js和Search.js和Button.js。正在显示数据，搜索正在工作，但删除按钮不起作用。我已经编写了一个用于删除按钮的函数，但我猜这是有问题的，但是不知道是什么。

App.js

parseExpr

Table.js

let pNumber = pfloat .>> spaces |>> Float
let pTimes = pstring "*" .>> spaces >>% (fun x y -> Multiply (x, y))
let pMultiply = chainl1 pNumber pTimes

Button.js

import React, { Component } from 'react';
import './App.css';
import Table from './components/Table';
import Search from './components/Search';


//API config
const DEFAULT_QUERY = 'react';
const PATH_BASE = 'https://hn.algolia.com/api/v1';
const PATH_SEARCH = '/search';
const PARAM_SEARCH = 'query=';

const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`;


class App extends Component {
  constructor(){
    super();
    //here searchText is set to DEFAULT_QUERY which will return the result for keyword "redux"
    //refer line 8 to change
    this.state={
      searchText:'',
      result:''
    }
    this.onDismiss=this.onDismiss.bind(this);
    this.onSearchChange=this.onSearchChange.bind(this);
    this.searchStories=this.searchStories.bind(this);

    //this.isSearched=this.isSearched.bind(this);
  }

  //to add a delete button
  onDismiss=(id)=>{
    //filter out item array and return results with no matched id
    const deleteList=this.state.list.filter(item=>item.objectID!==id);
    //setting state of list to lastest deleteList
    this.setState({
      result:deleteList
    })  
  }
  //to add a search bar
  onSearchChange=(e)=>{
    //set state to value in search bar
    this.setState({
      [e.target.name]:e.target.value
    })
  }

  searchStories=(result)=>{
    this.setState({
      result
    });
  }
  //after mounting will fetch the api data
  componentDidMount(){
    fetch(url)
    .then(response => response.json())
    .then(result => this.searchStories(result));
  }

  render() {
    const {result,searchText}=this.state;
    if(!result){
      return null;
    }
    return(
      <div className="page">
          <div className="interactions">

        <Search
       searchText={searchText}
       onSearchChange={this.onSearchChange}
       >
        Search
        </Search>
        </div>
       <Table
       list={result.hits}
       onDismiss={this.onDismiss}
       searchText={searchText}/>

      </div>

    )

  }
}

export default App;

Answer 1

您的按钮需要稍作修改：

<button onClick={onClick} className={className} >{children}</button>

处理程序需要引用传入的props，它们是this.props.onClick，而不是this.props.onclick（您拥有的）。

可以通过修改App.js来解决您遇到的错误：

onDismiss = id => {
  if (id) {
    const deleteList = this.state.list.filter(item => item.objectID !== id);
    // setting state of list to lastest deleteList
    this.setState({
      result:deleteList
    }) 
  }
}

Answer 2

更改按钮中的组件

const{onclick,className='',children}=props;

到

const{onClick,className='',children}=props;

似乎您还没有在状态中设置列表，因此，当您尝试访问this.state.list.filter时，它将引发错误。

onDismiss=(id)=>{    
  const deleteList=this.state.result.hits.filter(item=>item.objectID!==id);    
  this.setState({
  result:{...this.state.result,hits:deleteList}
})

}

函数在React.js中的onClick事件上不起作用

2 个答案: