Как отобразить только текст, который пользователь написал из компонента в другой?

Question

После того, как я закончил создание статьи с помощью компонента CreateArticle (который работает нормально), я хочу отображать только то, что пользователь написал (его value) в <textarea value={value}> в компоненте SearchArticle через displayName() function.

Другими словами, в CreateArticle компоненте, когда пользователь закончил набирать что-то в <textarea/>, после чего нажмите Submit (это кнопка, которая сохраняет то, что написал пользователь), я хочуотображать только то, что пользователь написал в Search Article внутри displayName() функции.

Что я делаю не так и как я могу это исправить?

Вот CreateArticle:

import React, { Component } from 'react';
import {connect} from "react-redux";
import * as actionType from "../../store/actions/actions";

class CreateArticle extends Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = event => {
        this.setState({storyTextValue: event.target.value});
        this.props.storyTextValueRedux(event.target.storyTextValue);
        event.preventDefault();
    }

    handleStoryText = event => {
        event.preventDefault();
        this.setState({value: event.target.value});
    }

    onSubmit = () => {
        if(this.state.value === "") {
            alert("Please enter the value and then click submit");
        } else {
            alert("Article saved " + '\n' + this.state.value + this.props.articleIdValue);
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input type="text" placeholder="author name"/>
                    <textarea value={this.props.storyTextValue} onChange={this.handleStoryText} rows="2" cols="25" />
                    <button type="submit" value="Submit" onClick={() => this.onSubmit()}>Submit</button>
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        articleIdValue: state.articleIdValue.articleIdValue,
        storyTextValue: state.storyTextValue.storyTextValue
    };
};

const mapDispatchToProps = dispatch => {
    return {
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value}),
        storyTextValueRedux: (value) => dispatch({type: actionType.STORY_VALUE, value})
    };
};

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

Вот SearchArticle:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../../store/actions/actions';

import ArticleText from '../../containers/ArticleText/ArticleText';

class SearchArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            flag: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
        this.props.CityCodeReducerRedux(event.target.value);
    }

    handleSubmit(event) {
        this.setState({flag: true});
        event.preventDefault();
    }

    displayName = () => {
        if(this.props.cityCodeValue === "nyc" || this.props.articleIdValue === 1) {
            return(
                <div>
                    <p>author name: {this.props.authorNameValue}</p>
                    <p>article text: {<ArticleText/>}</p>
                </div>
            );
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input onChange={this.handleChange} value={this.props.articleIdValue} placeholder="article id"/>
                    <button onClick={() => this.displayName}  value="Search">Submit</button>
                    {this.state.flag ? this.displayName() : null}
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        cityCodeValue: state.cityCodeValue.cityCodeValue,
        authorNameValue: state.authorNameValue.authorNameValue,
        articleIdValue: state.articleIdValue.articleIdValue
    };
};

const mapDispatchToProps = dispatch => {
    return {
        CityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
    };
};

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

Вот StoryTextReducer:

import * as actionType from '../store/actions/actions';

const initialState = {
    storyTextValue: ''
};

const StoryTextReducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.STORY_VALUE:
            return {
                ...state,
                storyTextValue: action.value
            };
        default:
            return state;
    }
};

export default StoryTextReducer;

Answer 1

Вы смотрите на 2 разных экземпляра <ArticleText>.Изменение свойств экземпляра в CreateArticle не приведет к изменению экземпляра в SearchArticle

Вместо того, чтобы пытаться разделить значение с помощью того же класса, вы должны делиться значением с тем, что находится в хранилище избыточностей.

Вы должны определить действие, которое отправляет событие, например {type: updateArticleText, articleText: foo}, затем в вашем редукторе вы можете установить состояние избыточности для свойства ArticleText, равного event.articleText.

Сейчасчто ваше значение хранится в хранилище избыточности, а не в состоянии компонента, ваши компоненты просто получают реквизиты из хранилища избыточности в функции mapStateToProps.