web-dev-qa-db-ja.com

React-Reduxアプリ：「繰り返し不可能なインスタンスを拡散しようとする試みが無効です」問題

最初は、そのサンプルアプリは正常に動作していました。入力したデータは、ブラウザのページとデータベースで確認できました。現時点では、データベースを介してのみデータを表示できますが、ブラウザにはデータが表示されず、このエラーがさらに表示されます：「繰り返し不可能なインスタンスを拡散しようとする無効な試み」。

サンプルコードがあります：

projectActions.js

import {FETCH_BOOK, CREATE_BOOK, DELETE_BOOK} from '../actions/projectTypes';
import axios from 'axios';

const apiUrl = 'http://api/books';

export const createBookSuccess =  (data) => {
  return {
    type: CREATE_BOOK,
    payload: {
      _id: data._id,
      author: data.author,
      publication: data.publication,
      publisher: data.publisher
    }
  }
};

export const deleteBookSuccess = _id => {
  return {
    type: DELETE_BOOK,
    payload: {
      _id
    }
  }
};

export const fetchBook = (books) => {
  return {
    type: FETCH_BOOK,
    books
  }
};

export const createBook = ({ author, publication, publisher }) => {
  return (dispatch) => {
    return axios.post(`${apiUrl}`, {author, publication, publisher})
      .then(response => {
        dispatch(createBookSuccess(response.data))
      })
      .catch(error => {
        throw(error);
      });
  };
};

export const deleteBook = _id => {
  return (dispatch) => {
    return axios.delete(`${apiUrl}/${_id}`)
      .then(response => {
        dispatch(deleteBookSuccess(response.data))
      })
      .catch(error => {
        throw(error);
      });
  };
};

export const fetchAllBooks = () => {
  return (dispatch) => {
    return axios.get(apiUrl)
      .then(response => {
        dispatch(fetchBook(response.data))
      })
      .catch(error => {
        throw(error);
      });
  };
};

projectReducer.js

import {CREATE_BOOK, DELETE_BOOK, FETCH_BOOK} from '../actions/projectTypes';

const projectReducer = (state = [], action) => {
  switch (action.types) {
    case CREATE_BOOK:
      return [...state, action.payload];
    case DELETE_BOOK:
      let afterDelete = state.filter(book => {
        return book._id !== action.payload._id
      });
      return {
        ...state,
        state: afterDelete
      }
    case FETCH_BOOK:
      return action.books;
    default:
      return state;
  }
}

export default projectReducer;

rootReducer.js

import books from './projectReducer';
import {combineReducers} from 'redux';

const rootReducer = combineReducers({
    books: books
});

export default rootReducer;

BookListElement.js

import React from 'react';
import {connect} from 'react-redux';
import BookList from '../components/bookList';
import {deleteBook} from '../store/actions/projectActions';

const BookListElement= ({books, deleteBook}) => {
  if(!books.length) {
    return (
      <div>
        No Books
      </div>
    )
  }
  return (
    <div>
      {books.map(book => {
        return (
          <BookList book={book} deleteBook={deleteBook} key={book._id} />
        );
      })}
    </div>
  );
}

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

const mapDispatchToProps = dispatch => {
  return {
    deleteBook: _id => {
      dispatch(deleteBook(_id));
    }
  };
};

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

bookList.js

import React from 'react';

const styles = {
  borderBottom: '2px solid #eee',
  background: '#fafafa',
  margin: '.75rem auto',
  padding: '.6rem 1rem',
  maxWidth: '500px',
  borderRadius: '7px'
};

const BookList =  ({ book: { author, publication, publisher, _id }, deleteBook }) => {
  return (
    <div style={styles} key={_id}>
      <h2>{author}</h2>
      <p>{publication}</p>
      <p>{publisher}</p>
      <button className="btn waves-effect waves-light" type="submit" name="action" onClick={() => {deleteBook(_id)}}>
        <i className="large material-icons">delete_forever</i>
      </button>
    </div>
  );
};

export default BookList;

bookCreate.js

import React, {Component} from 'react';

class BookCreate extends Component {
  state= {
    author: '',
    publication: '',
    publisher: ''
  }

  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.createBook(this.state)
  }

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white" autoComplete="off">
          <h5 className="grey-text text-darken-3">Create New Book</h5>
          <div className="input-field">
            <label htmlFor="author">Author</label>
            <input type="text" id="author" onChange={this.handleChange}/>
          </div>

          <div className="input-field">
            <label htmlFor="publication">Publication</label>
            <input type="text" id="publication" onChange={this.handleChange}/>
          </div>

          <div className="input-field">
            <label htmlFor="publisher">Publisher</label>
            <input type="text" id="publisher" onChange={this.handleChange}/>
          </div>

          <div className="input-field">
            <button className="btn pink lighten-1 z-depth-0">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

export default BookCreate;

コードを数回確認し、この問題に関する古い投稿を読みましたが、ジュニアとしての解決策が見つかりませんでした。あなたが私が見逃したことを言ったら、それは素晴らしいことです。

編集：viewList.jsファイルをbookList.jsとして追加しました。

javascriptreactjsreact-redux
14
gilgamesh

レデューサーでは、状態は配列であると想定されていますが、削除中にオブジェクトを返しました。

case DELETE_BOOK:
  let afterDelete = state.filter(book => {
    return book._id !== action.payload._id
  });
  return afterDelete;
12
Shubham Khatri

レデューサーで未定義の配列をコピーしようとすると、このエラーが発生します。例えば：

const newList = [...state.someList];

この場合、「someList」は未定義であるか、配列ではありません。スペルまたは正しい配列を使用していることを確認してください。

7
Nalan Madheswaran

この質問に答える必要はありませんが、多分これは、このエラーメッセージを受け取り、このSO-Postをつまずく人を助けるかもしれません

このエラーも発生しました。私の場合、エラーはクローンを作成しようとした要素は実際にはオブジェクトであり、配列ではありませんでした！

これは私が代わりにやったことでした：

var clone = {...this.state.myObj};

（の代わりに）

var clone = [...this.state.myObj];

私は知っています、本当に明らかですが、私たちは皆、どこかで始まりますよね？

0
Tim Gerhard

フェッチ応答をリデューサー状態に戻す必要があり、削除した書籍を1行でフィルタリングできると思います。多分これはうまくいくでしょう。

//projectReducer.js
import {CREATE_BOOK, DELETE_BOOK, FETCH_BOOK} from '../actions/projectTypes';

const projectReducer = (state = [], action) => {
  switch (action.types) {
    case CREATE_BOOK:
      return [...state, action.payload];
    case DELETE_BOOK:
      return state = state.filter(book => book._id !== action.payload._id)
    case FETCH_BOOK:
      return state = action.books;
    default:
      return state;
  }
}

export default projectReducer;
0
iambinodstha