Обрабатывать РЕДАКТИРОВАТЬ ДЕЙСТВИЯ в реаги-редуксе - PullRequest
Новая
       5

Обрабатывать РЕДАКТИРОВАТЬ ДЕЙСТВИЯ в реаги-редуксе

0 голосов
/ 06 апреля 2020

Я пытаюсь отредактировать сообщение в моем проекте Reaction-Redux, где я делаю это так:

Мой пост. 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>

, тогда действие вызывается действием. 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 });
      });
  };
};

затем в редуктор воспроизведения включается редуктор. 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, что означает, что я nbale, чтобы написать их ... это так, потому что при onChange мой компонент перерисовывается, а затем снова извлекает данные из состояния, заданного редуктором, ЕСЛИ да, тогда как я могу решить эту проблему?

Примечание. Я не использую здесь избыточную форму.

1 Ответ

1 голос
/ 07 апреля 2020

Это потому, что вы устанавливаете значение ваших input компонентов на значения, которые вы получаете из магазина притока. Но при изменении значений input вам также необходимо обновить значения в избыточном хранилище. Компоненты такого типа называются контролируемыми компонентами, но обычно мы используем состояние компонентов для управления ими, а не избыточное состояние. Подробнее о них можно прочитать здесь: https://reactjs.org/docs/forms.html#controlled -компоненты

Чтобы устранить эту ошибку, вам просто нужно использовать defaultValue prop вместо value prop для значений, полученных из redux, и использовать value опора для состояния вашего компонента, например: 

<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})}
/>
...