Question

我想将数据从单个API显示给不同的组件，因为我只想打一次API并将数据分发到多个小组件。我知道我可以通过使用redux状态来做到这一点，但不确定如何做到这一点。需要您的帮助来实现这一目标。下面是到目前为止完成的代码。

homepage / index.js

import SlidingBanner from './banner/BannerList';
import Celebslider from './celebrityslider/CelebSlider';

class HomePage extends Component {
        render() {
          return (
            <div>
                <SlidingBanner />
                <anotherslider />
            </div>  
          );
        }
      }

    export default HomePage;

BannerList.js

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { itemsFetchData } from '../../../actions/items';

class BannerList extends Component {

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

    render() {
        let bannerArray = [];
        let banner = this.props.items.banner
        for (let key in banner) {
            bannerArray.push(banner[key]);
            return (
                <div>
            <Slider {...slidersettings}>
            {this.props.items.banner.map((item) => (
                    <div key={item.id}>
                        <img src={item.image_url} className="img-responsive"/>
                    </div>
                ))}
            </Slider>        
            </div>
            );
        }
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }
        return (null);
    }
}

BannerList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    items: PropTypes.object.isRequired,
    hasErrored: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(BannerList);

anotherslider.js

Now in this file, i want to fetch another array of objects or object from the same API. 

I tried to mount the API in container component but did not worked, I hope i am doing some mistake. Please correct.

Answer 1

如果要在 anotherslider.js 文件中获取数据，则必须将reducer连接到其中的类/函数，以及在 < em> BannerList.js 文件。现在，在渲染调用componentWillReceiveProps(nextProps)函数之前，您将在这里获取数据。

Answer 2

如果要在两个滑块中调用数据，则有两种处理方式。

在HomePage.js组件中执行redux请求，并将数据绑定到其他组件。

在BannerList.js组件上获取数据时，状态将被更新。只需将redux连接添加到您的anotherslider.js组件并在更新时获取数据即可。

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(HomeList);

Answer 3

除了所有这些选项之外，您还可以使用react的Context API作为提供者/消费者，以在小型组件之间分配数据...这将节省您将props传递给所有小型组件，并使用Context直接访问组件中的值。消费者..而且，如果您不想将此状态存储在全局redux存储中，则上下文API会将您从中保存。

使用reactjs和redux获取多个组件中的JSON数据

3 个答案: