Question

我正在创建一个reactJS应用程序，它将显示手机列表。我目前正在调用API，将状态设置为响应，然后显示内容。我现在正在寻找添加排序顺序，但我遇到了困难。

当用户访问/ phones / Apple / iPhone时，路由将呈现以下调用api的组件，设置状态并将数据传递给结果组件......

export default class Phones extends Component {

constructor(props) {
    super(props);
    this.state = {
        data: null,
        make: this.props.params.make || null,
        model: this.props.params.model || null
    };
}

componentDidMount(){
    const makeQuery = this.state.make ? this.state.make + '/' : '';
    const modelQuery = this.state.model ? this.state.model : '';
    const fetchUrl = '/api/phones/' + makeQuery + modelQuery;

    fetch(fetchUrl, {
        headers: {
            Accept: 'application/json'
        }
    }).then(response => {
        if (response.ok) {
            response.json().then(json=> {
                this.setState({data: json});
            });
        }
    });
}

render() {
    if (this.state.data) {
        const currentUrl = this.props.location.pathname;

        return (
            <section className="phones">
                <Filters 
                    data={this.state.data}
                    currentUrl={currentUrl} />
                <Results 
                    data={this.state.data} />
            </section>
        )
    }
}
}

结果组件将映射数据并呈现电话列表。

在过滤器组件中，我有一个下拉列表，允许用户按价格值对结果进行排序，这也会设置状态。

export default class Filters extends Component {
constructor(props){
    super(props);
    this.state = {
        value: 0
    }

    this.onChange = this.onChange.bind(this);
}

onChange(e){
    this.setState({value: e})
}

render() {
    return (
        <div>
            <p>Price</p>
            <select onChange={this.onChange}>
                <option value='asc'>low to high</option>
                <option value='desc'>high to low</option>
            </select>
        </div>
    );
}
}

我遇到的问题是我不知道如何将此过滤器应用于呈现结果的组件，以及最佳方法是什么？

我已经开始阅读redux了，但如果电话数据和过滤器应该在商店中，因为它是临时的而且如果他们转到另一个页面会改变，即/ phones / Samsung / Galaxy /

感谢任何帮助

Answer 1

通常在React中，父容器将处理所有子组件的状态 - 数据和道具沿一个方向流动，向下流过组件树。

Redux提供了一种让容器访问更新状态的方法的方法。

This page from the Redux docs提供有关如何与React集成的说明。

Redux提供了一个包含整个应用程序状态的对象。然后，另一个NPM模块react-redux提供了两个功能，用于将组件“连接”到全局Redux状态：mapStateToProps和mapDispatchToProps。

使用此方法，您可以让Filters容器在全局状态下设置切换：

state = {
  phones: [],
  sortBy: 'price',
  sortOrder: 'asc',
}

或类似的。然后，您可以使用mapStateToProps来访问排序状态切片，并使用mapDispatchToProps来“分派”更新状态的操作。

Redux文档非常出色，并且以简单和初学者的名义编写。

Answer 2

所以有几种方法可以做到这一点。你提到你刚刚开始研究Redux，我鼓励你继续沿着这条路走下去。它将在应用程序状态管理领域为您提供很多帮助。也就是说，如果你只使用React这样做：

父组件是Phones，因此在Phones中编写辅助方法以跟踪过滤器（确保为组件首次构建或安装时设置默认过滤器状态，就像使用制作和模型）：

setFilter(filter) { this.setState({filter}); }

将filter从Phones组件状态传递到Filters和Results组件。同时将setFilter类方法传递到子Filters组件中（所有这些都在您的Phones组件的render方法中完成）：

return (
    <section className="phones">
        <Filters
            filter={this.state.filter}
            onChange={this.setFilter} 
            data={this.state.data}
            currentUrl={currentUrl} />
        <Results 
            data={this.state.data}
            filter={this.state.filter}/>
    </section>
)

更改您的Filter组件，使其onChange事件为您传递给它的setFilter处理程序，以及value道具<select> } component是我们传入的filter（2）。

我会留下3给你。我想你可以搞清楚:)请注意，您现在可以在结果类中访问过滤器值作为prop，并且可以在该组件中进行排序。

Answer 3

我已经开始阅读redux了，但如果电话数据和过滤器应该在商店中，因为它是临时的而且如果他们转到另一个页面会改变，即/ phones / Samsung / Galaxy /

Redux是解决此问题的绝佳解决方案。通过外化状态，两个组件都可以轻松访问必要的值。

您对数据更改的担忧不应该如此，因为这是redux商店的一个重要且常见的情况。即使文档中的todo list example也实现了与您所描述的类似的过滤器组件。

另一个好处是，如果您使用redux-thunk中间件（或您想要的任何异步中间件），您还可以将aws-android-sdk-apigateway-core调用移出组件，以使其变得更简单。< / p>

这种设置有很多例子，所以我现在不打算为你写任何内容，但我会在评论中针对任何特定请求更新此答案。

或者，您可以使用回调在组件之间上下传递数据。

来自this blog的图片很好地说明了如何实现这一目标

ReactJS - 用于更改另一个

3 个答案: