温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - React Native components not re-render if props changed
javascript react-native react-redux reactjs redux

javascript - 如果更改道具,React Native组件不会重新渲染

发布于 2020-04-10 10:18:01

如果更改了道具,则不会更新我的组件,但是调度的动作是正确的,并且存储也已正确更新反应生命周期方法没有听道具。

只有在状态更改后,才重新渲染组件。但是应该ComponentUpdate(),getDerivedStateFromProps()componentDidUpdate()不能实现对道具的更改。

如果更改了道具,如何重新渲染组件?

零件:

import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: []
        };
    }

    addTodo() {
        this.props.addTodo(this.state.title)
    }

    render() {
        return (
            <View>
                <Text style={style.title} >Alma</Text>
                <TextInput style={style.input} placeholder="New todo title" placeholderTextColor="gray" onChangeText={(text) => this.setState({ title: text })} />
                <TouchableOpacity style={{ margin: 20, backgroundColor: "lightblue", padding: 15, borderRadius: 20 }} onPress={() => this.addTodo()} >
                    <View>
                        <Text>Send</Text>
                    </View>
                </TouchableOpacity>

                {
                    this.props.todos.map((e, i) => {
                        return (
                            <Text style={{ textAlign: "center", fontSize: 17, margin: 10 }} key={i} >{e.title}</Text>
                        )
                    })
                }
            </View>
        );
    }
}

const style = StyleSheet.create({
    title: {
        textAlign: "center",
        marginTop: "20%",
        fontSize: 20
    },
    input: {
        borderColor: "black",
        borderWidth: 2,
        borderRadius: 20,
        paddingVertical: 10,
        paddingHorizontal: 20,
        color: "black"
    }
})
import { connect } from 'react-redux'
import { addTodo } from "./reducer";
import Main from "./Main";

function mapStateToProps(state, props) {
    return {
        todos: state.todos
    }
}

function mapDispatchToProps(dispatch, props) {
    return {
        addTodo: (text) => dispatch(addTodo(text))
    }
}

const MainContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Main)

export default MainContainer;

减速器及动作:

export default function todoReducer(state = { todos: [] }, action) {
    if (action.type === 'ADD_TODO') {
        let currentState = state;
        currentState.todos.push(action.newTodo);

        return currentState;
    }

    return state
}

export function addTodo(title) {
    return {
        type: "ADD_TODO",
        newTodo: title
    }
}

并存储:

import { createStore } from 'redux';
import todoReducer from "./reducer";
import { composeWithDevTools } from "redux-devtools-extension";


export default store = createStore(todoReducer,composeWithDevTools());

查看更多

提问者
BegGergo
被浏览
18
Charlie 2020-02-01 06:26

您正在使用currentState.todos.push(action.newTodo)对化简器中的状态进行变异,它应该是一个纯函数,否则反应无法得知道具已更改。

将您的reducer函数更新为纯函数

export default function todoReducer(state = { todos: [] }, action) {
  if (action.type === 'ADD_TODO') {
    const todos = [...state.todos, action.newTodo];
    return {...state, todos };
  }

  return state;
}