javascript - 如何使用 redux 更新数组

Question

我正在使用react-redux创建一个简单的CRUD应用程序。 从输入中导入标题和描述，将其存储在数组中，以及删除它们的功能已经实现，但修改它们的功能很困难，请求帮助。

action.js

export const addPosting = (title, description) => {
    return {
        type: ADD_POSTING,
        post: {
            id: nextId++,
            title,
            description
        }
    };
}

export const updatePosting = (payload) => {
    return {
        type: UPDATE_POSTING,
        payload
    }
}

export const deletePosting = (id) => {
    return {
        type: DELETE_POSTING,
        id
    }
}

postReducer.js

const initialState = [{
    id: 1,
    title: ' This is First Post',
    description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit.',
}]

const posts = (state = initialState, action) => {
    switch (action.type) {
        case ADD_POSTING:
            return state.concat(action.post);
        case DELETE_POSTING:
            return state.filter(post => post.id !== action.id);
        case UPDATE_POSTING:
            return // help
        default:
            return state;
    }
};

我尝试的方法没有修改。

case UPDATE_POSTING:
            return state.map(post => post.id === action.id ? {
                ...action.post,
            } :
            post
            )

表单.jsx

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updatePosting } from '../store/actions';

const Modal = ({ post, modal, close }) => {
  // update redux
  const posts = useSelector(state => state.posts);
  const dispatch = useDispatch();

  const onUpdate = (title, description) =>
    dispatch(updatePosting(title, description));

  // inputs
  const [inputs, setInputs] = useState({
    title: post.title,
    description: post.description,
  });

  const { title, description } = inputs;

  const onChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    onUpdate(title, description);
    setInputs({
      title: post.title,
      description: post.description,
    });
  };

  return (
    <React.Fragment>
      {modal ? (
    <React.Fragment>
      <div className="modal-container">
        <form className="modal" onSubmit={onSubmit}>
          <div className="title">
            <input
              className="titleInput"
              type="text"
              name="title"
              required
              value={title}
              onChange={onChange}
            />
            <button onClick={close}>x</button>
          </div>
          <div className="des">
            <textarea
              name="description"
              className="modal-des"
              cols="30"
              rows="10"
              required
              value={description}
              onChange={onChange}
            ></textarea>
          </div>
          <button onSubmit={onSubmit}>submit</button>
        </form>
      </div>
    </React.Fragment>
      ) : null}
    </React.Fragment>
  );
};

export default Modal;

感谢您帮助解决此问题。

Answer 1

听起来您需要执行两项操作:

1) filter找出所有没有更新帖子 ID 的帖子。

2) 将新帖子添加到过滤后的数组中并将其作为新状态返回。

请注意，要执行此操作，您需要在调用 updatePosting 时将 id 作为参数发送。

case UPDATE_POSTING: {
  const filtered = state.filter((post) => post.id !== action.post.id);
  return [ ....filtered, action.post ];
}