Question

我不知道我做错了什么。

我认为我明白了如何用redux实现。

我的问题是，状态发生变化后，Component的状态不会传播到Component。我知道我们必须创建新的状态对象，我确信我做得对。但没有变化。

另一个问题是，为什么状态在对象＆＃34; resetLink＆＃34; 中看图像。为什么它不存储在状态对象中？

请帮助我让它发挥作用。

redux的行动：

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

这是另一个相关的代码片段，其中实现了reducer。

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

您只需在构造函数中将VBoxManage convertfromraw组件中的this.result设置为一次，仅在实例化组件时执行。每次应用程序的状态更改时都不会执行构造函数：

SendResetLink

不是将状态的这一部分分配给反应组件的实例属性，而只需在this.result = props.state.result;函数中直接使用props属性：

render()

React redux不会传播状态

1 个答案: