Question

我有一个React Native应用程序，我尝试应用Redux。这是我第一次尝试使用Redux，所以我觉得我没有在房间里看到大象。

问题在于我无法访问我的道具数据（使用mapStateToProps生成）。这是我的代码：

reducer.js（在控制台日志中我看到json对象就好了）

<body>
    <?php
        //Create variables from user input
        $name=$_POST['name'];
        $id=$_POST['id'];
        $address=$_POST['address'];
        $major=$_POST['major'];
        $email=$_POST['email'];
        $phone=$_POST['phone'];

        //Create associative array
        $students = array('name'=> array(''), 
                          'id' => array(''),
                          'address' => array(''),
                          'major' => array(''),
                          'email' => array(''),
                          'phone' => array('')
                          );

        //Error checking
        if(!$name || !$id || !$address || !$major || !$email || !$phone){
             echo '<p align="center">
                    At least one input entry is missing, <br/>
                    please go back and try again.
                </p>';
             echo '<p align="center"><a href="task1.html">Back to Selection</a></p>';
        }//end if
        else{
            //populate students array with values entered
            $students['name'] = $name;
            $students['id'] = $id;
            $students['address'] = $address;
            $students['major'] = $major;
            $students['email'] = $email;
            $students['phone'] = $phone;

component.js（在console.log中我看到了我的数据，但现在它似乎只在一个对象中，这可能是我没见过的。）

const INITIAL_STATE = {
  etiquetas: []
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCH_ETIQUETAS_SUCCESS:
      //console.log("payload: "+action.payload);
      return { ...state, etiquetas: action.payload };
    default:
      return state;
  }
};

我知道，map函数适用于Arrays，而不是Objects。这是我旧代码的一部分。

action.js

class EtiquetasList extends Component {

  componentDidMount() {
    this.props.FetchEtiquetas();
  }

  renderEtiquetas() {
    //console.log("etq: "+JSON.stringify(this.props.etiquetas));
    if ( this.props.etiquetas.length == 0 ) {
      return <ActivityIndicator size="large" color="#00ff00" />
    } else {    
      return this.props.map(etiqueta =>
        <EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} />
      );
    }
  }

  render() {
    return (
      <ScrollView>
        {this.renderEtiquetas()}
      </ScrollView>
    );

  }

}

const mapStateToProps = (state) => {
  return {
    etiquetas: state.etiquetas
  };
};

export default connect(mapStateToProps, { FetchEtiquetas })(EtiquetasList);

减速器/ index.js

import axios from 'axios';
import { FETCH_ETIQUETAS, FETCH_ETIQUETAS_SUCCESS, FETCH_ETIQUETAS_FAILURE } from './types';

const url= 'https://e.dgyd.com.ar/wp-json/wp/v2/etiquetas?_embed&per_page=7';

const fetchSuccess = (dispatch, data)=> {
  dispatch({
    type: FETCH_ETIQUETAS_SUCCESS,
    payload: data
  });
}

export function FetchEtiquetas() {

  return function (dispatch) {
      axios.get( url )
        .then(response => {
          dispatch({ type: FETCH_ETIQUETAS_SUCCESS, payload: response.data })
        } );
  }
}

所以，我的问题是：

为什么这总是返回未定义？ this.props.etiquetas.length == 0
为什么mapStateToProps似乎将我的对象数组转换为单个对象？这就是我必须在控制台日志中使用JSON.stringify的原因吗？
最后，我如何访问组件中的数据？

提前多多谢谢你！

Answer 1

这里的问题就在于您构建减速器的方式。

const INITIAL_STATE = {
  etiquetas: []
};

上面的代码意味着您正在创建一个对象，其中包含一个名为“etiquetas”的属性，该属性最初包含一个空数组。

在root reducer文件中，导入该对象，并为其指定名称“etiquetas”。所以你的减速机真正回归的是：

etiquetas: {
  etiquetas: [your array of data]
}

这可以解释为什么你抱怨收到一个对象。有两种方法可以纠正这个问题，

一：将mapStateToProps函数更改为

const mapStateToProps = (state) => {
  return {
    etiquetas: state.etiquetas.etiquetas
  };
};

二：将您的减速机更改为这样，

export default (state = [], action) => {
  switch (action.type) {
    case FETCH_ETIQUETAS_SUCCESS:
      //console.log("payload: "+action.payload);
      return action.payload;
    default:
      return state;
  }
};

这将确保您的reducer只返回一个数组，而不是一个存储在属性中的数组内部的对象。由你来决定你更喜欢哪一个。

React / Redux - 从mapStateToProps发出迭代json

1 个答案: