Javascript 如何使用redux更新阵列

我正在使用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
            )

form.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;

import React，{useState}来自“React”；
从“react-redux”导入{useSelector，useDispatch}；
从“../store/actions”导入{updatePosting}；
常量模式=（{post，model，close}）=>{
//更新redux
const posts=useSelector（state=>state.posts）；
const dispatch=usedpatch（）；
const onUpdate=（标题、说明）=>
调度（更新站点（标题、描述））；
//投入
常量[inputs，setInputs]=useState({
标题：post.title，
description:post.description，
});
常量{title，description}=输入；
const onChange=e=>{
const{value，name}=e.target；
设置输入({
…输入，
[名称]：值，
});
};
const onSubmit=e=>{
e、 预防默认值（）；
更新（标题、说明）；
设置输入({
标题：post.title，
description:post.description，
});
};
返回(
{模态(
x
提交
)：null}
);
};
导出默认模式；

---

感谢您帮助解决此问题。

您的问题来自于您使用

操作

对象的方式。它包含您在操作方法中放置的post as

payload

属性：

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

}

因此，您的帖子可以通过

action.payload

case UPDATE_POSTING:
   return state.map(post => {
     if(post.id === action.payload.id){
        post = action.payload;
     }
   }
  )

响应：

case UPDATE_POSTING:
            return state.map((post, index) => {
                if (post.id === action.payload.id) {
                    return Object.assign({}, post, {
                        title: action.payload.title,
                        description: action.payload.description,
                        ...
                    })
                }

                return post
            })

在你的行动中：

updatePosting = (post) => ({
    type: UPDATE_POSTING,
    payload: {
        title: post.title,
        description: post.description
    }
})

---

希望有帮助

听起来你需要做两个操作：

1） 列出所有没有更新帖子id的帖子

2） 将新post添加到筛选数组中，并将其作为新状态返回

请注意，要执行此操作，您需要在调用

updatePosting

时将

id

作为参数发送

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

---

您的代码中有几个错误。你的更新调用没有提供你正在更新的ID：所以首先传递你正在更改的帖子的ID

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

然后在减速器中：

 case UPDATE_POSTING:
    // find the id which are trying to update with new title and description
    const filtered = state.filter((post) => post.id === action.payload.id);
    filtered.title= action.payload.title;
    filtered.description= action.payload.description;
    return filtered; //according your need post this