javascript - React componentWillReceiveProps 不更新状态

Question

我这里有这个 React 父组件。此时的子组件只是返回下拉菜单。我预计 componentWillReceiveProps 会在这里更新状态，而状态又应该作为 Prop 传递给 StopList。但是，当通过 handleSubSelect 更改 state.selectedSub 时，什么也不会发生，StopList 也不会收到任何 props。

是我对 componentWillReceiveProps 的异步性质的错误吗？它在我的代码中的错误位置吗？我使用了错误的生命周期方法吗？

// We're controlling all of our state here and using children
// components only to return lists and handle AJAX calls.

import React, { Component } from 'react';
import SubList from './SubList';
import StopList from './StopList';

class SubCheck extends Component {

  constructor (props) {
    super(props);
    this.state = {
        selectedSub: '--',
        selectedStop: null,
        stops: ['--'],
    };
    this.handleSubSelect.bind(this);
    this.handleStopSelect.bind(this);
    }

    // We want the user to be able to select their specific subway
    // stop, so obviously a different array of stops needs to be 
    // loaded for each subway. We're getting those from utils/stops.json.
    componentWillReceiveProps(nextProps) {
        var stopData = require('../utils/stops');
        var stopsArray = [];
        var newSub = nextProps.selectedSub
        for(var i = 0; i < stopData.length; i++) {
            var stop = stopData[i];

            if (stop.stop_id.charAt(0) === this.state.selectedSub) {
                stopsArray.push(stop.stop_name);
            }
        }
        if (stopsArray.length !== 0 && newSub !== this.state.selectedSub) {
            this.setState({stops: stopsArray});
        }
    }

    handleSubSelect(event) {
        this.setState({selectedSub:event.target.selectedSub});
    }

    handleStopSelect(event) {
        this.setState({selectedStop:event.target.selectedStop})
    }

    render() {
        return (
            <div>
                <SubList onSubSelect={this.handleSubSelect.bind(this)}/>
                <StopList stops={this.state.stops} onStopSelect={this.handleStopSelect.bind(this)}/>
            </div>
        );
    }
}

export default SubCheck;

Answer 1

您正在复制数据，并给自己带来不必要的麻烦。

selectedSub 和 selectedStop 都被存储为 props 和 state 属性。您需要决定这些数据的存放位置并将其放在一个单独的位置。

您遇到的问题完全围绕着您正在更改 state 属性并期望这会触发对 Prop 的更改这一事实。仅仅因为它们共享一个名称并不意味着它们具有相同的值。