reactjs - 为什么我的 useReducer 功能不起作用。当我使用它时页面显示但功能不起作用

Question

大家好 。我是反应新手。一切都很好但是当我开始使用减速器时。它无法正常工作。它的添加功能或删除功能不起作用。为什么这个问题。在使用 reducer 之前，我正在使用 context api 。和我想使用减速器的同一个项目。但它不能正常工作。该页面已显示，但它的添加或删除功能不起作用

BookContext.jsx

import React, { createContext, useReducer, useEffect } from 'react';
// import { v4 as uuid } from 'uuid' // This is update vertion 
import { bookReducer } from '../BookReducer/Reducer';

export const BookContext = createContext();

const BookContextProvider = (props) => {
    const [books, dispatch] = useReducer(bookReducer, []);
    useEffect(() => {
        localStorage.setItem('books', JSON.stringify(books))
    }, [books])


    return (
        <div>
            <BookContext.Provider value={{ books, dispatch }}>
                {props.children}
            </BookContext.Provider>
        </div>
    );
};

export default BookContextProvider;

减速器.jsx

    import { v4 as uuid } from 'uuid' // This is update vertion 

export const bookReducer = (state, action) => {
    switch (action.type) {
        case ' ADD_BOOK':
            return [...state, {
                title: action.book.title,
                author: action.book.author,
                id: uuid()
            }]
        case 'REMOVE_BOOK':
            return state.filter(book => book.id !== action.id)

        default:
            return state;
    }

}

BookForm.jsx

import React, { useContext, useState } from 'react';
import { BookContext } from '../Context/BookContext';

const NewBookform = () => {
    const { dispatch } = useContext(BookContext);
    const [title, setitle] = useState('');
    const [author, setauthor] = useState('');
    const Handelesubmit = (e) => {
        e.preventDefault()
        dispatch({
            type: 'ADD_BOOK', book: {
                title, author
            }
        })
        setitle(' ');
        setauthor(' ');
    }
    return (
        <div>
            <form onSubmit={Handelesubmit}>
                <input type='text' placeholder='Book Title' value={title} onChange
                    ={(e) => setitle(e.target.value)} required />
                <br></br>
                <input type='text' placeholder='Book author' value={author} onChange
                    ={(e) => setauthor(e.target.value)} required />

                <br></br>

                <input type='submit' value=" ADD Book" />
            </form>
        </div>
    );
};

export default NewBookform;

书籍详情

import React, { useContext } from 'react';
import { BookContext } from '../Context/BookContext';

const Bookldetails = ({ book }) => {
    const { dispatch } = useContext(BookContext)
    return (
        <li onClick={() => dispatch({ type: 'REMOVE_BOOK', id: book.id })}>
            <div className="title">{book.title}</div>
            <div className="id">{book.author}</div>
        </li>
    );
};

export default Bookldetails;

标签： reactjsreduce

Answer 1

您的删除功能工作得很好，这是您的代码：

const { createContext, useReducer, useContext } = React;
const uuid = ((id) => () => ++id)(0);
const BookContext = createContext();
const bookReducer = (state, action) => {
  switch (action.type) {
    case ' ADD_BOOK':
      return [
        ...state,
        {
          title: action.book.title,
          author: action.book.author,
          id: uuid(),
        },
      ];
    case 'REMOVE_BOOK':
      return state.filter((book) => book.id !== action.id);

    default:
      return state;
  }
};

const BookContextProvider = (props) => {
  const [books, dispatch] = useReducer(bookReducer, [
    { id: uuid(), title: 'title 1', author: 'author 1' },
    { id: uuid(), title: 'title 2', author: 'author 2' },
  ]);
  //this is not doing anything, you are never reading it
  // useEffect(() => {
  //   localStorage.setItem('books', JSON.stringify(books));
  // }, [books]);

  return (
    <div>
      <BookContext.Provider value={{ books, dispatch }}>
        {props.children}
      </BookContext.Provider>
    </div>
  );
};
const Bookldetails = ({ book }) => {
  const { dispatch } = useContext(BookContext);
  return (
    <li
      onClick={() =>
        dispatch({ type: 'REMOVE_BOOK', id: book.id })
      }
    >
      <div className="title">{book.title}</div>
      <div className="id">{book.author}</div>
    </li>
  );
};

const App = () => {
  const { books } = useContext(BookContext);
  return (
    <ul>
      {books.map((book) => (
        <Bookldetails key={book.id} book={book} />
      ))}
    </ul>
  );
};

ReactDOM.render(
  <BookContextProvider>
    <App />
  </BookContextProvider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>