Question

我正在一个组件中发出异步请求，并将结果分派到存储中。结果是对象数组。比其他组件，我试图将其映射到标签中。

问题是我遇到类型错误，因为我的reducer的初始状态为null，并且无法映射null。试图将其更改为空数组，但得到相同的错误。

我的减速器：

const initialState = {
  currentSearchResult: [],
};

const OrgsListReducer = (state = initialState, action) => action.type === 'GET_ORGS_LIST' ? action.payload : state;

有效载荷本身还可以

我的组件

class OrgList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            orgList: this.props.currentSearchResult,
        }
    }

    componentDidMount() {
        if (this.props.currentSearchResult !== []) {
            this.setState({
                isLoaded: true
            })
           }
       }

    render() {
        console.log(this.props.currentSearchResult);
        return this.state.isLoaded ?
            <ul>
                {this.state.orgList.map((org) =>
                    <li key={org.id}>{org.login}</li>
                )}
            </ul>
            :
            <h1>Loading...</h1>
    }
}

function mapStateToProps(state) {
    return {
        currentSearchResult: state.currentSearchResult
    }
}


export default connect(mapStateToProps)(OrgList)

Answer 1

删除构造函数中的this

this.state = {
    isLoaded: false,
    orgList: props.currentSearchResult,
}

但是为什么要在状态下使用redux值？您可以立即使用redux值。

您将currentSearchResult的默认值安排为空，因此即使没有值也可以正常使用。

<ul>
    {this.props.currentSearchResult.map((org) =>
         <li key={org.id}>{org.login}</li>
    )}
</ul>

Answer 2

如果action.payload是数组，并且想要将其放入state.currentSearchResult，则应该这样做

const OrgsListReducer = (state = initialState, action) => action.type === 'GET_ORGS_LIST' ? {currentSearchResult: action.payload } : state;

state本身就是对象，它仅包含一个属性currentSearchResult。因此，您应该将数组分配给currentSearchResult。因此状态结构不会被修改。

this.props.currentSearchResult !== []也将始终为true。 Array is object在JavaScript中。仅当same object compared to itself时对象相等。当您要检查数组是否为空时，请执行this.props.currentSearchResult.length > 0

尝试从商店映射数组但出现TypeError：* array * .map不是函数

2 个答案: