Как в React передать props в state полученные с помощью connect?

Question

[Дмитрий]

Здравствуйте. Есть форма у которой есть начальное состояние определяемое в constructor. Изначально state заполнял в componentDidMount(). Сейчас часть данных приходят через connect(react-redux) и в componentDidMount они пустые. Они есть внутри render метода. Как их передать в state компонента? Ниже код компонента. Там все в процессе переделки.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {validateEmail} from "../helpers/validation";

class ProductCommentsForm extends Component {

    constructor(props){
        super(props);
        
        this.state = {
            // START: input fields initional value
            userName: '',
            userEmail: '',
            productCommentContent: '',
            // END: input fields initional value
            productSlug: null,
            productID: null,
            userID: null,
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount(){
        const USER_ID = this.state.userID ? this.state.userID : 11

        console.log( 'this.props.myState', this.props.myState );

        /*this.setState({
            //comments: allComments,//is Array
            //users: users,// is Object
            userID: USER_ID,
            // if current user is logged out then userName is empty string
            // is for empty string validation before send request to server
            userName: (USER_ID === 11) ? '' : users[USER_ID]['name'],
            userEmail: users[USER_ID]['email'],
            userLogo: users[USER_ID]['logo'],
            commentsLength: allComments.length ? allComments.length : 0,
            productSlug: this.props.productSlug,
            productID: this.props.productID,
        });*/
    }

    handleChange(e){
        this.setState({
            [`${e.target.name}`]: e.target.value,
        });
    }

    handleSubmit(e){
        e.preventDefault();

        if ( this.state.productCommentContent && validateEmail(this.state.userEmail) && this.state.userName ) {
            const productComment = {
                content: this.state.productCommentContent,
                user_name: this.state.userName,
                user_email: this.state.userEmail,

                product_slug: this.state.productSlug,
                product_id: this.state.productID,
                user_id: this.state.userID,
            }

            axios.post('/api/product-comments', productComment).then(response => {
                const newCommentsList = [...this.state.comments, response.data];
                this.setState({
                    comments: newCommentsList,
                    commentsLength: newCommentsList.length,
                });
            });
        }
    }

    render(){

        // const {commentsLength, title, userName, userEmail, handleSubmit, handleChange} = this.props;
        const {userName, userEmail, handleSubmit, handleChange} = this.state;

        return (
            <div id="review_form_wrapper" className="review_form_wrapper">
                <div id="review_form">
                    <div id="respond" className="comment-respond">
                        {/*<span id="reply-title" className="comment-reply-title">
                            {commentsLength ? 'Ваша оценка' : `Будьте первым, кто оставил отзыв на “${title}”`} <small><a id="cancel-comment-reply-link" href="#" style={{display:'none'}}>Отменить ответ</a></small>
                        </span>*/}
                        <form
                            onSubmit={handleSubmit}
                            method="post"
                            id="commentform"
                            className="comment-form"
                            noValidate=""
                        >
                            <div className="reply-title-after">
                                Используйте данную форму, чтобы оставить отзыв о товаре или задать вопрос
                            </div>
                            <p className="comment-form-author">
                                <label>Ваше имя &nbsp;<span className="required">*</span></label>
                                <input
                                    onChange={handleChange}
                                    id="author"
                                    name="userName"
                                    type="text"
                                    size="30"
                                    aria-required="true"
                                    required=""
                                    defaultValue={userName}
                                />
                            </p>
                            <p className="comment-form-email">
                                <label>E-mail &nbsp;<span className="required">*</span></label>
                                <input
                                    onChange={handleChange}
                                    id="email"
                                    name="userEmail"
                                    type="email"
                                    size="30"
                                    aria-required="true"
                                    required=""
                                    defaultValue={userEmail}
                                />
                            </p>
                            <p className="comment-form-comment">
                                <label>Текст сообщения &nbsp;<span className="required">*</span></label>
                                <textarea
                                    onChange={handleChange}
                                    id="comment"
                                    name="productCommentContent"
                                    cols="45" rows="8"
                                >
                                </textarea>
                            </p>
                            <p className="form-submit">
                                <input name="submit" type="submit" id="submit" className="submit" value="Отправить"/>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {myState: state.products.comments};
};

export default connect(mapStateToProps)(ProductCommentsForm);

Спасибо.

Comments

[Антон Спирин]

Данные в props откуда приходят? И зачем вам их писать в state?

[Дмитрий]

Антон Спирин, в props приходит инфа о текущем продукте полученная в другом компоненте с помощью

axios.get(`/api/product-comments/${productSlug}`).then(data => {setProductComments(data.data);});

можно конечно сделать запрос еще раз, но зачем?
На основании этих данных заполняю state который потом используется для отправки формы

{
    userName: (USER_ID === 11) ? '' : users[USER_ID]['name'],
    userEmail: users[USER_ID]['email'],
    userLogo: users[USER_ID]['logo'],
    commentsLength: allComments.length ? allComments.length : 0,
    productSlug: this.props.productSlug,
    productID: this.props.productID,
}

после отправки формы создается новый коммент в базе данных

[Антон Спирин]

Дмитрий, запись props в state, в вашем случае, бессмысленное действие.
Вам важнее форму не показывать, пока данные загружаются. Можно вместо нее прелоадер показывать.
И перенесите все взаимодействие с API в redux async actions, а то у вас не код, а каша. Что-то в redux, что-то в компонентах.

можно конечно сделать запрос еще раз, но зачем?

Вот тут я ничего не понял. Храните данные, которые используются в разных местах в redux store.

[Дмитрий]

Антон Спирин, если писать данные в state бессмысленно, то как мне их получить в handleSubmit(e){} при отправке формы? При внесении данных в поля значение пишется в state и при отправке формы эти данные легко получить с помощью this.state.someName.
Как получить значение полей которые нужны для записи в бд.(с помощью axios)? Я их получу внутри render метода но как их взять при submit?

[Антон Спирин]

Дмитрий,

если писать данные в state бессмысленно, то как мне их получить в handleSubmit(e){} при отправке формы?

Данные формы вам там хранить не бессмысленно, а вот писать туда props не надо/

handleSubmit = e => {
  const { postComment, productID, userID, productSlug } = this.props;
  const { userName, userEmail, commentContent } = this.state;

  if (/* is form valid */) {
    postComment({
      user_name: userName,
      user_email: userEmail,
      comment_content: commentContent,
      product_id: productID,
      product_slug: productSlug,
      user_id: userID,
    });
  }
};

Это все, что, по-хорошему, должно быть в этом хандлере. Ну еще обработка ошибок валидации.
Списку комментариев в форме не место.
postComment - это asycn action, проброшенный в props с помощью matchDispatchToProps. В нем должен быть описан запрос к API.
Получив ответ ответ от сервера, это действие инициирует другое, по которому через редьюсер изменяется состояние списка комментариев.

Список комментариев получаете в компоненте со списком из хранилища redux, а не из локального состояния компонента.

Понимаете в чем суть? Логика вызовов описана в асинхронных действиях, а данные с API идут прямиком в redux.
Пример:

class Example extends React.Component {
  state = { value: '' };

  componentDidMount() {
    this.props.fetchSomeData();
  }

  handleChange = e => {
    const { value } = e.target;
    
    this.setState({ value });
  };  

  handleSubmitButtonClick = () => {
    const { value } = this.state;
    const { postSomeData } = this.props;
   
    if (value) {
      postSomeData({ value });
    }
  };

  render() {
    const { data, error, isFetching, fetchSomeData } = this.props;
    const { value } = this.state;   

    if (isFetching) return <Preloader />;

    if (error) return <TryAgain error={error} fetch={fetchSomeData} />;
    
    return (
      <Wrapper>
        {data.map(item => <Item key={item.id} item={item} />)}
        <input value={value} onChange={this.handleChange} />
        <button onClick={this.handleSubmitButtonClick}>Submit</button>
      </Wrapper>
    );
  }
}

const mapStateToProps = state => ({
  data: someDataSelector(state),
  isFetching: someDataFetchingStateSelector(state),
  error: someDataErrorSelector(state),
});

const mapDispatchToProps = {
  fetchSomeData,
  postSomeData,
};

export default connect(mapStateToProps, mapDispatchToProps)(Example);

Таким образом, для данных с API вы получаете:
1. Однонаправленный поток данных.
2. Единый источник правды.
3. Логику запроса к API, обновления данных, изменения флага состояния запроса и получения ошибки описанную в только в одном месте.

Answer 1

[Robur]

вам поможет https://reactjs.org/docs/react-component.html#stat...
но на самом деле вам нужно использовать props напрямую, в state хранить только то что может поменяться в процессе работы самого компонента при неизменных пропсах