React還原不傳播狀態

Question

我不知道我做錯了什麼。

我以爲我明白瞭如何用redux來實現。

我的問題是組件的狀態在狀態改變後沒有傳播到組件。我知道我們必須創建新的狀態對象，並且我確信我正確地做對了。但沒有變化。

而另一個問題是，爲什麼國家在對象「resetLink」看到圖像。爲什麼它不存儲在狀態對象？

請幫我讓它工作。

---

行動的終極版：

export const sendResetLink = (email) => { 
    return { 
     type: RESET_LINK, 
     email 
    } 
} 

---

class App extends React.Component { 

    render() { 
     return <VisibleResetLink/> 

    } 
} 

---

這是道具和調度功能，奇蹟發生了：

import {connect} from 'react-redux'; 
import SendResetLink from '../components/SendResetLink.jsx'; 
import {sendResetLink} from '../actions/index' 
import _ from 'lodash'; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onClick: (email) => { 
      dispatch(sendResetLink(email)) 
     } 
    } 
} 
const mapStateToProps = (state) => { 
    console.log("actual state", state); 
    return _.assign({} , {state: state.resetLink}); 
} 

const VisibleResetLink = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SendResetLink) 


export default VisibleResetLink 

---

這是裝載道具的組件，但它們在更改時不會重新渲染它們。

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 

class SendResetLink extends React.Component { 

    constructor(props, email, result) { 
     super(props); 

     console.log('props',props); 

     this.onClick = props.onClick; 
     this.result = props.state.result; 
     this.input = props.state.email; 
    } 

    renderResult (result){ 

     console.log("renderResult",result); 
     if(result) 
      return <div className="card-panel deep-orange lighten-4">Invalid username and password.</div> 
    } 

    render() { 
     return <div> 
      {this.renderResult(this.result)} 
      {this.result} 
      <form className="col s12" action="/login" method="post" onSubmit={e => { 
       e.preventDefault() 
       if (!this.input.value.trim()) { 
        return 
       } 
       this.onClick(this.input.value); 
       this.input.value = '' 
      } }> 
       <div className="row"> 
        <div className="input-field col s12"> 
         <i className="material-icons prefix">email</i> 
         <input id="email" type="email" name="email" className="validate" ref = {(node) => this.input = node } /> 
         <label for="email">Email</label> 
        </div> 
       </div> 
       <div className="divider"></div> 
       <div className="row"> 
        <div className="col m12"> 
         <p className="right-align"> 
          <button className="btn btn-large waves-effect waves-light" type="submit" name="action">Send reset key</button> 
         </p> 
        </div> 
       </div> 
      </form></div> 
    } 
} 

SendResetLink.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    state: PropTypes.object.isRequired 
} 
export default SendResetLink 

---

而這是其他相關的代碼片段，在減速中實現。

import _ from 'lodash'; 

const resetLink = (state = {email:"test@test.de", result:true}, action) => { 
    console.log('state', state) 
    switch (action.type) { 
     case 'RESET_LINK': 
       return _.assign({},state,{email: action.email, result: false}); 
     default: 
      return state 
    } 
} 
export default resetLink; 

---

import { combineReducers } from 'redux' 
import resetLink from './ResetLinkReducer.jsx' 

const resetApp = combineReducers({ 
    resetLink 
}) 

export default resetApp 

---

import App from './components/app.jsx'; 

import {Provider} from 'react-redux'; 
import { createStore } from 'redux'; 

import { render } from 'react-dom'; 
import React from 'react'; 
import resetApp from './reducers/index.js'; 


let store = createStore(resetApp,{}); 
console.log(store) 
render(<Provider store={store}> 
    <App /> 
</Provider>, document.getElementById('sendResetLinkComponent')); 

---

console logs. After click the renderResult should change to false. But it stays on true

Answer 1

你在你的SendResetLink組件在構造函數中設置this.result只有一次，這只執行時水泥沙漿nent被實例化爲。構造函數不會被執行，每次應用程序的狀態變化：

this.result = props.state.result; 

取而代之的分配狀態，這部分你反應組件的實例屬性，只需直接在render()功能使用props屬性：

{this.renderResult(this.props.state.result)}