Javascript 反应：我在还原程序的编辑状态中有一些错误_Javascript_Reactjs_Redux_React Redux

Javascript 反应：我在还原程序的编辑状态中有一些错误

javascript reactjs redux

Javascript 反应：我在还原程序的编辑状态中有一些错误,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我的消息来源：我试图编辑标题和内容，但第一次，内容并没有被修改，只有标题被修改从第二个开始，它工作得很好为什么会发生这种错误 reducers.js： case UPDATE_POST: return state.map( post => (post.id === action.id ? Object.assign({}, post, action) : post) ); 还有，有没有一种方法可以不使用object.assign而使用spread运算符？可能在函数

我的消息来源：

我试图编辑标题和内容，但第一次，内容并没有被修改，只有标题被修改

从第二个开始，它工作得很好

为什么会发生这种错误

reducers.js：

case UPDATE_POST:
  return state.map(
    post => (post.id === action.id ? Object.assign({}, post, action) : post)
  );

还有，有没有一种方法可以不使用object.assign而使用spread运算符？

可能在函数args中使用它，如下所示：

export default function Post(state = initialState, {type, ...post}) {

  switch (type) {

    case ADD_POST:
      return [ ...state, post ];

    case REMOVE_POST:
      return state.filter(({ id }) => id !== post.id);

    case UPDATE_POST:
      return state.map( p => (p.id === post.id ? post : p) );

    default:
      return state;
  }
}

可能在函数args中使用它，如下所示：

export default function Post(state = initialState, {type, ...post}) {

  switch (type) {

    case ADD_POST:
      return [ ...state, post ];

    case REMOVE_POST:
      return state.filter(({ id }) => id !== post.id);

    case UPDATE_POST:
      return state.map( p => (p.id === post.id ? post : p) );

    default:
      return state;
  }
}

由于要在道具中存储标题和内容的初始值，因此需要通过实现将初始

项组件状态值同步到道具
static getDerivedStateFromProps({ title, content }) {
    return {
      title, content
    }
}


否则，如果用户不触摸字段（比如内容），代码将使用默认状态值，即空字符串
还有，有没有一种方法可以不使用扩展运算符而使用扩展运算符
object.assign
此外，通过将整个操作传播到帖子中，您正在使用附加属性type
污染帖子对象。考虑使用<代码>有效载荷> /代码>对象来传递更新的帖子。
export function updatePost(id, title, content) {
  return {
    type: UPDATE_POST,
    payload: {
      id,
      title,
      content
    }
  };
}

然后分散有效载荷
case UPDATE_POST:
  return state.map(
    post => (post.id === action.payload.id ? {...post, ...action.payload} : post)
  );

由于要在道具中存储标题和内容的初始值，因此需要通过实现将初始项组件状态值同步到道具
static getDerivedStateFromProps({ title, content }) {
    return {
      title, content
    }
}


否则，如果用户不触摸字段（比如内容），代码将使用默认状态值，即空字符串
还有，有没有一种方法可以不使用扩展运算符而使用扩展运算符
object.assign
此外，通过将整个操作传播到帖子中，您正在使用附加属性type
污染帖子对象。考虑使用<代码>有效载荷> /代码>对象来传递更新的帖子。
export function updatePost(id, title, content) {
  return {
    type: UPDATE_POST,
    payload: {
      id,
      title,
      content
    }
  };
}

然后分散有效载荷
case UPDATE_POST:
  return state.map(
    post => (post.id === action.payload.id ? {...post, ...action.payload} : post)
  );

发生这种情况的原因是项目组件的构造具有空字符串，因此当您编辑标题输入时，状态将更新，如果您不编辑内容输入，状态将保持为空
组件/List/items.jsx
class Item extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEdit: false,
      title: this.props.title,
      content: this.props.content
    };
  }
  //...
}

并且为了避免Object.assign
减速器/post.jsx
case UPDATE_POST:
  return state.map(
    post => (post.id === action.id ? { ...post, ...action } : post)
  );

这将克隆post
props，并合并action
props
发生这种情况是因为项目组件的结构带有空字符串，因此当您编辑标题输入时，状态会更新，如果您不编辑内容输入，状态将保持为空
组件/List/items.jsx
class Item extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEdit: false,
      title: this.props.title,
      content: this.props.content
    };
  }
  //...
}

并且为了避免Object.assign
减速器/post.jsx
case UPDATE_POST:
  return state.map(
    post => (post.id === action.id ? { ...post, ...action } : post)
  );

这将克隆post
props，并合并action
props
因为在item.jsx文件中this.state.title
和this.state.content
仅在更改输入get时更新，如果其中一个输入未更改，则this.state.title或this.state.content
中的任何一个都是空字符串。将项目添加到列表后，this.props.title
和this.props.content
可用，但this.state.title
和this.state.content
最初在组件中定义为“”字符串。因此，不要将defaultvalue作为this.props.tile和this.props.content，在编辑集this.state.title=this.props.title
和this.state.content=this.props.content
上，它将起作用。
因为在item.jsx文件this.state.title
和this.state.content
中，只有在更改输入时才会更新，如果其中一个输入没有更改，则this.state.title或this.state.content
为空字符串。将项目添加到列表后，this.props.title
和this.props.content
可用，但this.state.title
和this.state.content
最初在组件中定义为“”字符串。因此，在编辑集this.state.title=this.props.title
和this.state.content=this.props.content
上，不要将默认值作为this.props.tile和this.props.content，这样它就可以工作了。
使用您在codesandbox上的示例，我看不出有问题。代码运行得很好。奇怪的是，我创建了一个项目，然后编辑了这两个项目，标题和内容，并成功地更新了这两个项目。例如，我添加了标题：123，内容：456并编辑了两者，只更新了标题。内容已删除。使用codesandbox上的示例，我看不出有问题。代码运行得很好。奇怪的是，我创建了一个项目，然后编辑了这两个项目，标题和内容，并成功地更新了这两个项目。例如，我添加了标题：123，内容：456并编辑了两者，只更新了标题。内容已删除。谢谢您的回答：）谢谢您的回答：）谢谢您的回答：）谢谢您的回答：）谢谢：）但是，内容的空字符串仍然存在。谢谢：）但是，内容的空字符串仍然存在。