javascript - 为什么我的 React 组件渲染被调用两次，一次没有数据，然后又一次有数据，但是为时已晚的异常？

Question

我有一个组件 TreeNav，其数据来自 api 调用。我已经设置了 reducer/action/promise 和所有的管道，但是当我在数据上调用 map() 时在组件渲染中，得到“Uncaught TypeError: Cannot read property 'map' of undefined”。

故障排除显示 TreeNav render() 被调用了两次。第二次是在数据从 api 返回之后。但是由于第一个 render() 错误，第二个 render() 永远不会运行。

这是我的代码文件:

-------- reducers/index.js --------

import { combineReducers } from 'redux';
import TreeDataReducer from './reducer_treedata';

const rootReducer = combineReducers({
  treedata: TreeDataReducer
});

export default rootReducer;

-------- reducers/reducer_treedata.js --------

import {FETCH_TREE_DATA} from '../actions/index';

export default function (state=[], action) {
    switch (action.type) {
        case FETCH_TREE_DATA: {
            return [action.payload.data, ...state];
        }
    }

    return state;
}

-------- actions/index.js --------

import axios from 'axios';

const ROOT_URL = 'http://localhost:8080/api';

export const FETCH_TREE_DATA = 'FETCH_TREE_DATA';

export function fetchTreeData () {
    const url = `${ROOT_URL}/treedata`;
    const request = axios.get(url);

    return {
        type: FETCH_TREE_DATA,
        payload: request
    };
}

-------- components/tree_nav.js --------

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchTreeData} from '../actions/index';

class TreeNav extends Component {
  constructor (props) {
    super(props);

    this.state = {treedata: null};
    this.getTreeData();             
  }

  getTreeData () {
    this.props.fetchTreeData();
  }

  renderTreeData (treeNodeData) {
    const text = treeNodeData.text;

    return (
      <div>
        {text}
      </div>
    );
  }

  render () {
    return (
      <div className="tree-nav">
        {this.props.treedata.children.map(this.renderTreeData)}   
      </div>
    );
  }
}

function mapStateToProps ({treedata}) {
    return {treedata};
}

// anything returned from this function will end up as props 
// on the tree nav
function mapDispatchToProps (dispatch) {
  // whenever selectBook is called the result should be passed to all our reducers
  return bindActionCreators({fetchTreeData}, dispatch);
}

// Promote tree_nav from a component to a container. Needs to know about
// this new dispatch method, fetchTreeData. Make it available as a prop.
export default connect(mapStateToProps, mapDispatchToProps)(TreeNav);

Answer 1

就您的第二次渲染错误而言，状态必须以您不期望的方式被覆盖。所以在你的 reducer 中，你将返回包含任何数据的数组，以及当前状态的 splat。使用执行连接的数组。

var a = [1,2,3]
var b = [a, ...[2,3,4]]

编译为:

var a = [1, 2, 3];
var b = [a].concat([2, 3, 4]);

因此，鉴于您期望有一个子属性，我认为您真正想要的是一个返回对象而不是数组的 reducer，并执行如下操作:

return Object.assign({}, state, { children: action.payload.data });

确保将初始状态更新为一个带有空子数组的对象。

去掉这一行，因为你使用的是 Prop 而​​不是状态。如果您只需要在组件内部管理更改，状态会很有帮助。但您正在利用 connect，因此此处不需要。

this.state = {treedata: null};