反应componentWillReceiveProps不更新状态

Question

我在这里有这个React父组件。 此时的子组件只是返回下拉菜单。 我希望componentWillReceiveProps将在这里更新状态，而状态又应作为道具传递给StopList。 但是，当通过handleSubSelect更改state.selectedSub时，什么也没有发生，并且StopList不接收任何道具。

我的错误是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属性，并期望这会触发对道具的更改。 仅仅因为它们共享一个名称并不意味着它们具有相同的值。