Question

我正在对我的后端进行简单的api调用以显示所有工具。我正在使用Redux / Redux Thunk来处理应用程序的状态。在我的/ tools页面上，它应该只列出数据库中的所有工具。它看起来像渲染两次，因为props.tools最初是null然后有工具数组。不幸的是，这仍然会导致错误。如果有人可以解释这种行为以及如何解决这个问题，我将不胜感激。

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Tools extends Component {
  render() {
    console.log(this.props);
    console.log('tools', this.props.tools);

    const allTools = this.props.tools.map(tool => <li>tool</li>);

    return (
      <div>
        <h1>tools</h1>
        <ul>{allTools}</ul>
      </div>
    ) 
  }
}

function mapStateToProps(state) {
  return { tools: state.tools };
}

export default connect(mapStateToProps)(Tools);

Answer 1

当第一次缩减器初始化时，它没有tools的值所以，你得到tools=null，因为这是一个错误。

您必须在reducer中将其设置为默认值。

在您的Reducer中，只需要将tools初始化为默认值。

const defaultState = {
   tools : []
}
const  myReducers = (state = defaultState,action)=>{
   //....other action
    default : 
     return state;
}

React / Redux Tools.js：9 Uncaught TypeError：无法读取null的属性“map”

1 个答案: