时间戳

首页 > 解决方案 > 在 react-redux 中处理 EDIT ACTION

reactjs - 在 react-redux 中处理 EDIT ACTION

问题描述

我正在尝试在我的 react-redux 项目中编辑一个帖子，我这样做是这样的

我的 post.js

 <div className="Heading_with_icon_story">
              <span className="post_heading">{item.storyTitle}</span>
              <p className="both_icons">
                <img src={edit} alt="miss-mistake" className="edit-icon" onClick={()=>this.editStory(item)} />
                <img
                  src={trash}
                  alt="miss-mistake"
                  className="edit-icon"
                  onClick={() => this.deleteStory(item._id,item.userID)}
                />
              </p>
            </div>

然后在此 action 被称为 action.js

export const editStoryAction = (itemId) => {
  return (dispatch) => {
    fetch("http://localhost:3000/api/edit-story", {
      method: "POST",
      body: itemId,
    })
      .then((res) => res.json())
      .then((response) => {
        console.log(response.data);
        dispatch({ type: EDIT_STORY, payload: response.data });
        Router.push("/edit-story");
      })
      .catch((err) => {
        console.log("Eror in adding");
        dispatch({ type: EDIT_STORY_FAIL, payload: err });
      });
  };
};

然后是 reducer 发挥作用 reducer.js

  const getEditStoryReducer = (state = {}, action) => {
    switch (action.type) {
      case EDIT_STORY:
        return action.payload
      default:
        return state;
    }
  };

  export default getEditStoryReducer;

然后最后是我面临问题的编辑页面

class editStory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      storyTitle: "",
      storyDescription: "",
    };
  }




  render() {

    return (
      <React.Fragment>
        <Header />
        <main className="share_content">
          <p className="Share_heading">What's your story ?</p>
          <input
            type="text"
            value={this.props.storyDetails.storyTitle}
            placeholder="what is your story called ?"
            className="share_input_title"
            onChange={(e)=>this.setState({storyTitle:e.target.value})}
          />
          <textarea
            type="text"
            value={this.props.storyDetails.storyDescription}
            placeholder="your experience and what did you learn from it.."
            className="share_input_description"
            onChange={(e)=>this.setState({storyDescription:e.target.value})}
          />

          <button className="Share_button" onClick={()=>this.handleSubmit()}>Post !</button>
        </main>
      </React.Fragment>
    );

  }
}


const mapStateToProps = (state) => {
  console.log(state)
  return {storyDetails:state.getEditStoryReducer};
};
export default connect(mapStateToProps, { verifyToken,editStoryAction })(editStory);

所以我让我的输入框正确地填充了数据，但我无法通过 onChange 方法更改它，这意味着我无法编写它...是不是因为 onChange 我的组件被重新渲染然后再次拾取来自减速器给出的状态数据如果是，那么我该如何解决这个问题？

注意 - 我在这里没有使用 redux 形式。

标签： reactjsreduxreact-reduxredux-thunk

解决方案

这是因为您将input组件的值设置为从 redux 存储中获得的值。但是在更改您的input值时，您还需要更新 redux 存储中的值。这类组件称为受控组件，但通常我们使用组件状态而不是 redux 状态来控制它们。在此处阅读有关它们的更多信息：https ://reactjs.org/docs/forms.html#controlled-components

要解决此错误，您只需对来自 redux 的值使用defaultValueprop 而不是prop，并为组件状态使用 prop，如下所示：valuevalue

<input
    type="text"
    defaultValue={this.props.storyDetails.storyTitle}
    value={this.state.storyTitle}
    placeholder="what is your story called ?"
    className="share_input_title"
    onChange={(e)=>this.setState({storyTitle:e.target.value})}
/>

推荐阅读