Question

在我的本机安卓应用中，当我尝试在BoardsScreen或应用根目录中发送操作时，弹出以下错误：

然而，当我删除它时，该应用程序不会崩溃。

BoardsScreen.js

import React from 'react';
import { connect } from 'react-redux';
import { Container, Content, Text, List, Button, Icon, ListItem } from 'native-base';
import { ListView, StatusBar } from 'react-native';
import { ConfirmDialog } from 'react-native-simple-dialogs';
import ActionButton from 'react-native-action-button';

import { removeBoard } from '../actions/configurationActions';

class BoardsScreen extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      boardDeleteDialog: false,
      secId: null,
      rowId: null,
      rowMap: null,
    };
  }

  deleteRow(secId, rowId, rowMap) {
    rowMap[`${secId}${rowId}`].props.closeRow();

    const newData = [...this.props.boards];

    newData.splice(rowId, 1);

    this.props.removeBoard(newData);

    this.setState({
      rowId: null,
      secId: null,
      rowMap: null,
      boardDeleteDialog: false,
    });
  }

  dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

  render() {
    console.log(this.props.boards);
    return (
      <Container>
        <StatusBar backgroundColor="#00C853" />
        <ConfirmDialog
          title="Delete board?"
          animationType="fade"
          visible={this.state.boardDeleteDialog}
          positiveButton={{
            title: 'Delete',
            titleStyle: {
              color: '#2ecc71',
            },
            onPress: () => this.deleteRow(this.state.secId, this.state.rowId, this.state.rowMap),
          }}
          negativeButton={{
            titleStyle: {
              color: '#2ecc71',
            },
            title: 'Cancel',
            onPress: () =>
              this.setState({
                boardDeleteDialog: false,
                secId: null,
                rowId: null,
                rowMap: null,
              }),
          }}
        />
        <Content>
          {this.props.boards.length >= 1 ? (
            <List
              style={{ backgroundColor: '#D9534F' }}
              dataSource={this.dataSource.cloneWithRows(this.props.boards)}
              renderRow={data => (
                <ListItem
                  style={{ paddingLeft: 14, backgroundColor: 'transparent' }}
                  button
                  onPress={() =>
                    this.props.navigation.navigate('Board', {
                      board: data.board,
                      boardName: data.boardName,
                    })
                  }
                >
                  <Text>{data.boardName}</Text>
                </ListItem>
              )}
              renderRightHiddenRow={(data, secId, rowId, rowMap) => (
                <Button
                  full
                  danger
                  onPress={() =>
                    this.setState({
                      boardDeleteDialog: true,
                      secId,
                      rowId,
                      rowMap,
                    })
                  }
                >
                  <Icon active name="trash" />
                </Button>
              )}
              disableRightSwipe
              rightOpenValue={-75}
            />
          ) : (
            <Text>No boards added.</Text>
          )}
        </Content>
        <ActionButton
          buttonColor="#2ecc71"
          fixNativeFeedbackRadius
          onPress={() => this.props.navigation.navigate('AddBoard')}
        />
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  boards: state.configurationReducer.boards,
});

const mapDispatchToProps = dispatch => ({
  removeBoard: (board) => {
    dispatch(removeBoard(board));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(BoardsScreen);

App.js

import React from 'react';
import { connect } from 'react-redux';
import MainNavigator from './src/config/Router';

import { addBoardToList } from './src/actions/configurationActions';

import { Board } from './src/API';

class App extends React.PureComponent {
  componentDidMount() {
    Board.getList(true).then(response => this.parseDataFromJSONResponse(response));
  }

  parseDataFromJSONResponse(response) {
    for (let i = 0; i < response.length; i += 1) {
      this.props.addBoardToList(response[1]);
    }
  }

  render() {
    return <MainNavigator />;
  }
}

const mapStateToProps = state => ({
  boards: state.configurationReducer.boards,
});

const mapDispatchToProps = dispatch => ({
  addBoardToList: (board) => {
    dispatch(addBoardToList(board));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

configurationReducer.js

const initialState = {
  theme: 1,
  obscure: false,
  boards: [],
  boardsList: [],
};

const configurationReducer = (state = initialState, action) => {
  let newState = { ...state };

  switch (action.type) {
    case 'ADD_BOARD':
      newState = {
        boards: [...state.boards, action.payload],
      };

      return newState;
    case 'REMOVE_BOARD':
      newState = {
        boards: action.payload,
      };

      return newState;
    case 'ADD_BOARD_TO_LIST':
      newState = {
        boardsList: [...state.boardsList, action.payload],
      };

      return newState;
    default:
      return state;
  }
};

export default configurationReducer;

configurationActions.js

function addBoard(board) {
  return {
    type: 'ADD_BOARD',
    payload: board,
  };
}

function removeBoard(board) {
  return {
    type: 'REMOVE_BOARD',
    payload: board,
  };
}

function addBoardToList(board) {
  return {
    type: 'ADD_BOARD_TO_LIST',
    payload: board,
  };
}

export { addBoard, removeBoard, addBoardToList };

我真的不知道造成这种情况的原因，也许这是一个错误，但我不知道是否有反应 - 还原错误或本身反应。

Answer 1

当你移除电路板时，它看起来像你的减速器，你会返回一个奇怪的新状态：

case 'REMOVE_BOARD':
      newState = {
        boards: action.payload,
      };

      return newState;

董事会应该是一个阵列吗？我想你错过了一些东西，例如：

boards: state.boards.filter ((it) => it.id !== action.payload.id),

React native - 无法在组件中调度操作，因为状态未定义

1 个答案: