реакции: повторная визуализация части экрана при каждой замене редуктора

Question

У меня есть проектactjs, и у меня есть экран, на котором нужен компонент для отображения обновленных значений редуктора при каждом запуске действия.У меня есть нажатие кнопки, но я не выдаю кнопку отправки, но использую событие onclick, которое вызывает диспетчер для запуска действия.Я вижу обновление редуктора, но я не вижу обновления компонента на экране.Как я могу активировать метод рендеринга после обновления редуктора?Что, если я хочу, чтобы компонент обновлялся, а не все в методе рендеринга, в сценарии частичного обновления страницы?

Answer 1

всякий раз, когда вы отправляете запускать действие по какому-либо событию, создайте переменную (скажем, загрузку), установите для нее значение true или false, как вам нужно в редукторе, и затем вы сможете получить доступ к подпоркам из mapStateToProps.И вы получите реквизиты для метода componentWillReceiveProps при получении новых данных, где вы можете условно проверить свойство (в нашем случае загрузка), чтобы отобразить нужный элемент DOM в браузере.

Пример. Предупреждение отображается в соответствии сошибка с сервера.

// import here
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            email: {
                value:'',
                isValid:false,
                isTouched:false,
                error:'Valid Email is required'
            },
            password:{
                value:'',
                isValid:false,
                isTouched:false,
                error:'Password of at least 6 character is Required'
            },
            isFormValid: false,
            serverResp:'',
        };
    }

    componentDidMount() {
        // console.log("login props", this.props)
        if (this.props.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
    }
    componentWillReceiveProps(nextProps) {
        // console.log("Component will receive", nextProps);
        if (nextProps.auth.isAuthenticated) {
           return this.props.history.push('/dashboard');
        }
        //checking server error response
        if (nextProps.auth.error) {
            this.setState({ serverResp:nextProps.auth.error.message});
        }
    }
    onChange = (e) => {
        this.handleUserInput(e)
    }
    handleUserInput(e) {
        const name = e.target.name;
        const value = e.target.value;
        let fieldState = this.state[name];

        this.setState({[name]:{...fieldState,value:value,isTouched:true} },
            () => { this.validateField(name, value) });
        }   
    validateField(fieldName, value) {
      //validation here
    }

    validateForm() {
        this.setState({ isFormValid:this.state.email.isValid && this.state.password.isValid });


    }
    errorClass(error) {
        return (error.length === 0 ? '' : 'has-error');
    }

    onSubmit = (e) => {
        e.preventDefault();
        if(this.state.isFormValid){
            this.props.login({
                email: this.state.email.value,
                password: this.state.password.value
            });
        } else{
            let emailState = this.state.email;
            emailState = {...emailState,isTouched:true}
            let passwordState = this.state.password;
            passwordState = {...passwordState,isTouched:true}

            this.setState({email:emailState,password:passwordState});
        }
    }

    render() {
        return (
            <div className="app flex-row align-items-center">
                <Container>
                    <Row className="justify-content-center">
                        <Col md="8">
                            <CardGroup>
                                <Card className="p-4">
                                    <CardBody>
                                    { this.state.serverResp && 
                                    <Alert color="danger">{this.state.serverResp}</Alert>
                                        }<Form onSubmit={this.onSubmit}>
                                            <h1>Login</h1>
                                            <p className="text-muted">Sign In to your account</p>
                                            <InputGroup className="mb-3">
                                                <InputGroupAddon addonType="prepend">
                                                    <InputGroupText>
                                                        <i className="icon-user"></i>
                                                    </InputGroupText>
                                                </InputGroupAddon>
                                                <Input invalid={ this.state.email.isTouched && !this.state.email.isValid} type="text" name="email" value={this.state.email.value} placeholder="Username" onChange={this.onChange} autoComplete="username" />
                                                <FormFeedback>{this.state.email.error}</FormFeedback>
                                            </InputGroup>
                                            <InputGroup className="mb-4">
                                                <InputGroupAddon addonType="prepend">
                                                    <InputGroupText>
                                                        <i className="icon-lock"></i>
                                                    </InputGroupText>
                                                </InputGroupAddon>
                                                <Input invalid={this.state.password.isTouched && !this.state.password.isValid} type="password" name="password" value={this.state.password.value} placeholder="Password" onChange={this.onChange} autoComplete="current-password" />
                                                <FormFeedback>{this.state.password.error}</FormFeedback>
                                            </InputGroup>
                                            <Row>
                                                <Col xs="6">
                                                    <Button color="primary" className="px-4">Login</Button>
                                                </Col>
                                                <Link to="/forgotpassword">
                                                    <Col xs="6" className="text-right">
                                                        <Button color="link" className="px-0">Forgot password?</Button>
                                                    </Col>
                                                </Link>
                                            </Row>
                                        </Form>
                                    </CardBody>
                                </Card>
                                <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
                                    <CardBody className="text-center">
                                        <div>
                                            <h2>Sign up</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                          labore et dolore magna aliqua.</p>
                                            <Link to="/signup">
                                                <Button color="primary" className="mt-3" active tabIndex={-1}>Register Now!</Button>
                                            </Link>
                                        </div>
                                    </CardBody>
                                </Card>
                            </CardGroup>
                        </Col>
                    </Row>
                </Container>
            </div>
        );
    }
}

// Login.propTypes = {
//     loginUser: PropTypes.func.isRequired,
//     auth: PropTypes.object.isRequired,
//     errors: PropTypes.object.isRequired
// };

const mapStateToProps = state => ({
    auth: state.login,
});

const mapDispatchToProps = dispatch =>{
    return {
        login:(userData) => login(userData,dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Login)

Answer 2

Компоненты могут обновляться только при смене реквизита или изменении состояния.

Если вы подключаете компонент к обновляемым реквизитам, он должен выполнить повторную визуализацию, если реквизиты что-то изменили в компоненте.

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

Этот раздел из документации очень полезно ИМО!