Question

在仪表板上工作时，我需要在选项更改时更改周期（即月，季等）时更新表。遇到麻烦/绑定。

export default class SalesFinancialDiv extends React.Component {
    constructor(props) {
        super(props);
        this.state = {periods: null, period: null};
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount() {
        $.getJSON("/marketing-dashboard/sales-financial/periods", function(result) {
            this.setState({periods: result, period: result[1]});
        }.bind(this));
    }

    onChange(event) {
        console.log(event.target.value);
        this.setState({period: event.target.value});
    }

    render() {
        if(this.state.periods != null && this.state.period != null) {
            return (
                <div>
                    <h3>Marketing Dashboard | Financial Data</h3>
                    <SalesFinancialPeriods periods={this.state.periods} onChange={this.onChange} />
                    <SalesFinancialTable period={this.state.period} />
                </div>
            );
        } else {
            return (
                <div>Loading...</div>
            );
        }
    }
}

class SalesFinancialPeriods extends React.Component {
    makeOptions(data) {
        return (
            data.map(function(period) {
                return (
                    <option value={period}>{period}</option>
                )
            })
        );
    }
    render() {
        return (
            <div id="sales-financial-periods">
                <select onChange={this.props.onChange} >
                    {this.makeOptions(this.props.periods)}
                </select>
            </div>
        );
    }
}

class SalesFinancialTable extends React.Component {
    render() {
        return (
            <table className="table table-striped table-codero">
                <TableHeader />
                <TableBody  period={this.props.period} />
                <TableFooter />
            </table>
        );
    }
}

class TableBody extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: null, dates: null};
    }

    componentDidMount() {
        let url1 = "/marketing-dashboard/sales-financial/data/" + this.props.period;
        let url2 = "/marketing-dashboard/sales-financial/dates/" + this.props.period;
        $.getJSON(url1, function(result) {
            this.setState({data: result});
        }.bind(this));
        $.getJSON(url2, function(result) {
            this.setState({dates: result});
        }.bind(this));

    }
    componentWillReceiveProps(nextProps) {
        let url1 = "/marketing-dashboard/sales-financial/data/" + nextProps.period;
        let url2 = "/marketing-dashboard/sales-financial/dates/" + nextProps.period;
        $.getJSON(url1, function(result) {
            this.setState({data: result});
        }.bind(this));
        $.getJSON(url2, function(result) {
            this.setState({dates: result});
        }.bind(this));

    }
    render() {
        // 
    }
}

您可以看到最高级别的课程SalesFinancialDiv触发并获取periods和初始period，然后将这些句点传递给构建该SalesFinancialPeriods的{{1}}类落下。此外，SalesFinancialDiv将最初的period两个孩子传递给TableBody，TableBody会启动以获取填充表格的数据。

正如我所说，我需要弄清楚如何将新选择的句点传递给<select>类以触发并获取新的数据集。

已更新已将<select onChange={this.props.onChange}>更改为period，我现在看到父节点发生了更改，但我没有看到父节点通过新setState给孩子们Coworker和我认为，因为最高级别的节点正在更新w / xhr它会重新渲染孩子。还检查了componentWillReceiveProps请求是否已发送但未发送。

更新2 已实施{{1}}并修复了问题！感谢

Answer 1

来自React Docs：

挂载：componentDidMount

void componentDidMount()

调用一次，   仅在客户端（不在服务器上），在最初之后立即执行   渲染发生。在生命周期的这个阶段，您可以访问任何   引用您的孩子（例如，访问底层DOM）   表示）。子组件的componentDidMount（）方法是   在父组件之前调用。

所以 componentDidMount 只是在初始渲染发生后的生命周期中被调用一次 - 使用当前设置，在你点击刷新之前不再有AJAX调用。

你必须使用ComponentWillReceiveProps思考者，否则 $。getJSON（...）只被调用一次。

<强> PS

您应该考虑一些flux实现，因为从组件内部发出AJAX请求会导致很多问题。我推荐Redux。

ES6 React绑定更改

1 个答案: