Состояние исчезнет после обновления компонента - PullRequest
Новая
       7

Состояние исчезнет после обновления компонента

0 голосов
/ 06 сентября 2018

Я сделал небольшое приложение для опроса с домашним компонентом и новым компонентом Home Render State с вопросом и опцией голосования в новом компоненте Вы можете сделать новый опрос с опцией голосования. После перехода в Новый компонент кнопкой «Добавить опрос» старое состояние исчезнет, Поэтому я могу добавить только один опрос. Как я могу сохранить это состояние исчезающим? 

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Poll from './Poll'


class Home extends Component {
  state = {
    question:"",
    tag:[],
  }

componentDidMount() {
  if (this.props.location.state !== undefined) {
    const tag = this.props.location.state.tag;
    const que= this.props.location.state.question;
      this.setState({
      tag: [...this.state.tag, tag],
      question: [...this.state.question, que]
    })
  }
}


  render() {
    return (
      <div style={{marginTop:"200px", width:"1200px", marginLeft:"auto", marginRight:"auto"}}>
        <ul style= {{display:"flex",justifyContent:"center",alignItems:"center"}}>
        <Poll
          question={this.state.question}
          tag={this.state.tag}
        />
        </ul>
        <div style={{marginTop:"30px"}} >
          <Link to='/New'>
            <button
            style={{width:"100px", height:"80px", cursor:"pointer" }}>
              Add Poll
            </button>
          </Link>
        </div>
      </div>
    )
  };
}

export default Home;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Edit:

Я передаю состояние от нового компонента 

<Link to={this.state.question && this.state.tag[0] ?
              { pathname: '/', state: {
              question: this.state.question,
              tag : this.state.tag
              } }
             :
             { pathname: '/New'}}>
              <button style={{padding:"8px", marginTop:"10px"}}>
                Add new poll
              </button>
            </Link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<BrowserRouter>
        <Switch>
          <Route exact path ="/" component={Home}/>
          <Route path ="/New" component={New} />
        </Switch>
      </BrowserRouter>

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Реактивный компонент теряет состояние после размонтирования компонента. Если вы хотите сохранить состояние даже после размонтирования компонента, попробуйте использовать Redux .

0 голосов
/ 06 сентября 2018

Вы можете разделить свои компоненты на контейнер (Домашний) и презентационные компоненты (Список опросов, Новый).

I.e. Дом будет поддерживать состояние и отображать список или новый компонент. Таким образом, вы никогда не потеряете государство.

Кнопка добавления будет изменять только своего рода флаг в вашем штате, и в соответствии с этим флагом вы будете отображать один из компонентов.

...