Javascript 表上未显示的项目

我一直在尝试创建这个搜索应用程序，我可以在其中显示表中的项目，并使用react redux删除项目。但是，在初始加载时，应用程序显示一个表，但表中没有数据。这是一张空桌子。如果我搜索另一个电影名称，其中该搜索词包含多个电影，那么将显示两个表，但我希望在同一个表中显示所有内容。“删除”按钮也不起作用。我的action和reducer文件有什么问题吗

Action.js

import {
  FETCH_MOVIE_PENDING,
  FETCH_MOVIE_SUCCESS,
  FETCH_MOVIE_ERROR,
  DELETE_MOVIE
} from "./types";

const fetchMoviePendig = () => ({
  type: FETCH_MOVIE_PENDING
});

const fetchMovieSuccess = json => ({
  type: FETCH_MOVIE_SUCCESS,
  payload: json
});

const fetchMovieError = error => ({
  type: FETCH_MOVIE_ERROR,
  payload: error
});

export const fetchMovie = name => {
  return async dispatch => {
    dispatch(fetchMoviePendig());
    try {
      const url = `https://jsonmock.hackerrank.com/api/movies/search/?Title=${name}`;
      const response = await fetch(url);
      const result = await response.json(response);

      console.log(result);
      dispatch(fetchMovieSuccess(result.data));
    } catch (error) {
      dispatch(fetchMovieError(error));
    }
  };
};

export const deleteEvent = id => async dispatch => {
  try {
    dispatch({
      type: DELETE_MOVIE,
      payload: id
    });
  } catch (err) {
    console.log(err);
  }
};

减速器

import {
  FETCH_MOVIE_PENDING,
  FETCH_MOVIE_SUCCESS,
  FETCH_MOVIE_ERROR,
  DELETE_MOVIE
} from "../action/types";

const initialState = {
  data: [],
  loading: false,
  error: ""
};

const moviesReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_MOVIE_PENDING:
      return {
        ...state,
        loading: true
      };
    case FETCH_MOVIE_SUCCESS:
      return {
        ...state,
        loading: false,
        data: [...state.data, action.payload]
      };
    case FETCH_MOVIE_ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    case DELETE_MOVIE:
      return {
        ...state,
        data: state.data.filter(movie => movie.id !== action.payload)
      };
    default:
      return state;
  }
};

export default moviesReducer;

App.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMovie } from "./action/movieActions";

import Input from "./components/Input";
import MovieTable from "./components/MovieTable";

class App extends Component {
  state = {
    searchInput: "The Rain"
  };

  componentDidMount() {
    this.props.getMovieList(this.state.searchInput);
  }

  _getMovie = () => {
    this.props.getMovieList(this.state.searchInput);
  };

  _onChangeHandler = e => {
    this.setState({
      searchInput: e.target.value
    });
    console.log(this.state.searchInput);
  };
  render() {
    const { data, loading } = this.props.movies;
    return (
      <div className="center">
        <div>
          <h2 className="center white-text">Movie Search</h2>
        </div>

        <div className="container">
          <Input
            value={this.state.searchInput}
            onChange={this._onChangeHandler}
            onClick={this._getMovie}
          />
          <div className="row">
            {loading ? (
              <p>Loading</p>
            ) : (
              data.map(item => (
                <MovieTable
                  key={item.imdbID}
                  year={item.Year}
                  name={item.Title}
                  movieId={item.imdbId}
                />
              ))
            )}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    movies: state.movies
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getMovieList: name => dispatch(fetchMovie(name))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“/action/movieActions”导入{fetchMovie}；
从“/components/Input”导入输入；
从“/components/MovieTable”导入可移动文件；
类应用程序扩展组件{
状态={
搜索输入：“雨”
};
componentDidMount（）{
this.props.getMovieList（this.state.searchInput）；
}
_getMovie=（）=>{
this.props.getMovieList（this.state.searchInput）；
};
_onChangeHandler=e=>{
这是我的国家({
搜索输入：e.target.value
});
console.log（this.state.searchInput）；
};
render（）{
const{data，load}=this.props.movies；
返回(
电影搜索
{加载(
装载

) : (
data.map（项=>(
))
)}
);
}
}
常量mapStateToProps=状态=>{
返回{
电影：国家电影
};
};
const mapDispatchToProps=调度=>{
返回{
getMovieList:name=>dispatch（fetchMovie（name））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（App）；

我看到数据具有以下模式：

 Object {page: 1, per_page: 10, total: 1, total_pages: 1, data: Array[1]}
page: 1
per_page: 10
total: 1
total_pages: 1
data: Array[1]
0: Object
Title: "Sin in the Rain"
Year: 2006
imdbID: "tt1072449"

---

您在组件渲染逻辑中访问了错误的属性，可以修复吗。

我看到数据具有以下模式：

 Object {page: 1, per_page: 10, total: 1, total_pages: 1, data: Array[1]}
page: 1
per_page: 10
total: 1
total_pages: 1
data: Array[1]
0: Object
Title: "Sin in the Rain"
Year: 2006
imdbID: "tt1072449"

如果您在组件渲染逻辑中访问了错误的属性，可以修复吗

重复表是按照您编写逻辑的方式创建的。 将数据传递给MovieTable组件，让它渲染并创建表 然后填满它

在reducer（FETCH_MOVIE_SUCCESS）中，您不需要将数据追加到 仅替换或使用当前电影数据

重复表是按照您编写逻辑的方式创建的。 将数据传递给MovieTable组件，让它渲染并创建表 然后填满它

在reducer（FETCH_MOVIE_SUCCESS）中，您不需要将数据追加到 仅替换或使用当前电影数据

---

您好，请看一下沙箱：

我编辑过

 <MovieTable
        data={data.map(d => ({
          year: d.Year,
          name: d.Title,
          movieId: d.imdbId
        }))}
      />

---

而且。。。当前删除按钮没有事件，这就是它无法工作的原因

您好，请查看沙盒：

我编辑过

 <MovieTable
        data={data.map(d => ({
          year: d.Year,
          name: d.Title,
          movieId: d.imdbId
        }))}
      />

---

而且。。。当前“删除”按钮没有事件，这就是它无法工作的原因

请在沙箱中显示修复程序，好吗？我不知道怎么修。我按照你说的对减速器做了改动。但我不确定这张桌子，至少它现在显示了电影的名字。但是我如何修复复制表和删除按钮？你能在沙箱中显示修复吗？我不知道怎么修。我按照你说的对减速器做了改动。但我不确定这张桌子，至少它现在显示了电影的名字。但是我如何修复复制表和删除按钮呢？谢谢，它起作用了。您还可以看看deleteMovie功能吗？它说deleteMovie不是一个函数。。看看它的工作原理。您还可以看看deleteMovie功能吗？它说deleteMovie不是一个函数。。看看更新