Question

我感觉有更好/不可重复的方式从道具中获取数据。

目前我正在将元素映射到道具以获取如下数据：

@connect((store) => {
    return {
        listAdProductsData: store.listAdProductsData.data,
        adProductsData: store.adProductsData.data,
        foxFooterData: store.foxFooterData.data
    }

})

要获取与属性相关的数据，我必须在我的容器中编写一个“getData”函数，以检查数据是否未定义为对象数组，然后将其作为props传递给我的组件，如下所示：

getFoxData(){
        let data;

        if (this.props.foxFooterData.data === undefined) {
            data = [{}];
        } else {
            data = this.props.foxFooterData.data[0];
        }

        return data
    }

使用这种方法，我需要再将此函数编写两次以从listAdProductData和adProductsData获取数据。

获取数据的行动：

componentWillMount() {
        //Fetch Fox Footer Data
        this.props.dispatch(fetchFoxFooterData());
    }

这是我的渲染函数的样子，包括将数据作为props传递下来：

render() {
        this.getFoxData();

        return (
            <div className="ad-products-wrap container no-padding col-xs-12">
                <Footer data={this.getFoxData()} />

这似乎很费力且重复 - 当然必须有一个更好的方法来做这样的事情？

Answer 1

你能不能直接传入你想要数据的特定道具作为参数，因为每种类型的数据的方法似乎相同？

编辑见评论：

function getData(dao){
    if (dao.data === undefined) {
        return [{}];
    }
    return dao.data;
}

感觉就像一个非常笼统的＆＃34;无效检查＆＃34;可以这么说，所以你可以把它外包给另一个方法，然后简单地传递你试图从中获取数据的对象。我确信通过检查正确的对象和所有这些可以做得更好更好，但这是基本的想法。

Answer 2

使用initialState确保商店中永远不会有undefined个条目：

// reducer.js

...

const initialState = {
  listAdProductsData: {
    data: [{}]
  },
  adProductsData: {
    data: [{}]
  },
  foxFooterData:  {
    data: [{}]
  }
}

const reducer(state = initialState, action) {
  switch(action.type) {
...

另一种方法是在商店中留下undefined条目，然后在组件中构建道具时使用默认值：

// in a functional component

const Component = ({
  listAdProductsData = [{}],
  adProductsData = [{}],
  foxFooterData = [{}]
}) => (
  <Footer data={foxFooterData} />
)

// extending React.Component

class Component extends React.Component {

  render = () => {

    const {
      listAdProductsData = [{}],
      adProductsData = [{}],
      foxFooterData = [{}]
    } = this.props

    return <Footer data={foxFooterData} />

  }

}

React + Redux获取数据 - 清洁解决方案

2 个答案: