javascript - ReactJS - 更改另一个组件呈现的内容的组件

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 中，父容器将处理所有子组件的状态 - 数据和 props 在一个方向上流过组件树。

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

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

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

使用这种方法，您可以让过滤器容器在全局状态下设置切换:

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

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

Redux 文档非常棒，编写时考虑到了简单性和初学者的需要。