reactjs - 将数据上传到表没有结果

问题描述

你好，我在某个时候跟随 mosh hamedani 课程，我被困在表格中上传数据

这是我的表格，其中标题和流派正在上传库存和价格在哪里这些是数字而不是字符串没有上传这里是我的表格主体

class TableBody extends Component {
    
    render() {
        const {data,columns} = this.props
        console.log({data,columns})
        return ( <tbody>
            {data.map(item => <tr key={item._id}>
                
            {columns.map(column => <td key={item._id + (column.path || column.key)}>{_.get(item,column.path)}</td>)} 
            </tr>
            )}
            
        </tbody>
            
        );
    }
}

数据和列来自movietable组件这里是代码

class MovieTable extends Component {
  columns =[
    { path:'title',label:'Title'},
    { path:'genre.name',label:'Genre'},
    { path:'numberInstock',label:'stock'},
    { path:'dailyReantalRate',label:'Rate'},
    { key: 'like' },
    {key: 'delete' }
  ];
  
  render() {
    const {movies, onDelete,onSort ,onLike,sortColumn,onAdd,deleted} = this.props;
    return (
      <table className="table">
          <TableHeader columns={this.columns} sortColumn={sortColumn} onSort={onSort}/>
          <TableBody data={movies} columns={this.columns}/>
          <tbody>
            {movies.map((movie) => (
              <tr key={movie._id}>
                <td>{movie.title}</td>
                <td>{movie.genre.name}</td>
                <td>{movie.numberInStock}</td>
                <td>{movie.dailyRentalRate}</td>
                <td>
                  {" "}
                  <Like
                    liked={movie.liked}
                    onClick={() => onLike(movie)}
                  />{" "}
                </td>
                <td
                  onClick={() => onDelete(movie._id)}
                  className="btn  btn-danger btn-outline-warning btn-sm active "
                >
                  Remove
                </td>
              </tr>
            ))}
          </tbody>
          <tbody>
            {deleted.map((movie) => (
              <tr key={movie._id}>
                <td>{movie.title}</td>
                <td>{movie.genre.name}</td>
                <td>{movie.numberInStock}</td>
                <td>{movie.dailyRentalRate}</td>
                <td>
                  {" "}
                  <Like />{" "}
                </td>
                <td
                  onClick={() => onAdd (movie._id)}
                  className="btn  btn-danger btn-outline-primary btn-sm active "
                >
                  ADD
                </td>
              </tr>
            ))}
          </tbody>
        </table>
    );
  }
}

来自其父电影组件的道具的电影这里是电影组件代码

class Movies extends Component {
  state = {
    movies:[],
    deleted: [],
    genres:[],
    pageSize: 9,
    currentPage:1,
    sortColumn:{
      path:'title',
      order:'asc'
    }
  };
  componentDidMount(){
    const genres =[{ _id:"",name:'All Genres'},...getGenres()]
    this.setState({
      movies:getMovies(),
      genres
    })
  }
  
  handleDelete = (_id) => {
    const movie = this.state.movies.find((x) => x._id === _id);
    this.setState({ deleted: [...this.state.deleted, movie] });
    this.setState({ movies: this.state.movies.filter((x) => x._id !== _id) });
  };
  handleLike = (m) => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(m);
    movies[index] = { ...movies[index] };
    movies[index].liked = !movies[index].liked;
    this.setState({ movies });
  };
  handleReinstate = (_id) => {
    const movie = this.state.deleted.find((movie) => movie._id === _id);
    this.setState({ movies: [...this.state.movies, movie] });
    this.setState({
      deleted: this.state.deleted.filter((movie) => movie._id !== _id),
    });
  };
  handleGenreSelect = genre => {
    this.setState({selectedGenre:genre, currentPage:1})

  }
  handleSort= sortColumn =>{
   
    this.setState({sortColumn});
  }

  render() {
    const { pageSize,currentPage,sortColumn,selectedGenre,movies:allMovies,deleted} = this.state;
    const filtered = selectedGenre && selectedGenre._id ? allMovies.filter(m=>m.genre._id === selectedGenre._id ): allMovies;
    const sorted = _.orderBy(filtered, [sortColumn.path],[sortColumn.order]);
   
    const movies = paginate(sorted,currentPage,pageSize)
    return (
      <div className="row">
        <div className="col-2">
          <ListGroup items={this.state.genres} selectedItem={this.state.selectedGenre}  onItemSelect={this.handleGenreSelect}/>
        </div>
        <div className="col">
        <div className={this.getbadgesClasses()}> <p>there are {filtered.length} movies in our data base</p> </div>
        <MovieTable 
         movies={movies} 
         onSort={this.handleSort} 
         onDelete={this.handleDelete}
         onLike={this.handleLike}
         deleted={deleted}
         onAdd={this.handleReinstate}/>
        <Pagination
          itemCount={filtered.length}
          pageSize={pageSize}
          sortColumn={sortColumn}
          onPageChange={this.handlePageChange}
          currentPage={currentPage}
        />

        </div>

       
       
      </div>
    );
  }
  getbadgesClasses() {
    let classes = " badge m-2 badge-";
    classes += this.state.movies.length === 0 ? "warning" : "primary";
    return classes;
  }
 
  handlePageChange = (page) => {
    this.setState({currentPage: page})
  };
}

这是我的 console.log

标签： reactjs

reactjs - 将数据上传到表没有结果

问题描述

解决方案

推荐阅读