我有三个组成部分。父（MonthToDate）和两个子（DisplayInvoice＆amp; DateSelector）。现在，MonthToDate中有HTML-select个onChange与groupBySelector相关联，触发groupBySelector相同类别的功能。 select函数的工作是根据GroupBy值设置状态。状态更改后，DateSelector函数将返回新视图
现在，child component组件也设置父组件的状态，但视图不会立即呈现。相反，只有在我使用父组件的HTML-select时才会重新渲染
现在，我知道 setState（）是异步，但如果setState()可以使用DateSelector 重新呈现一种类型的值更新，为什么不为其他事件还是？（即parent component被触发）
这是import React, { Component } from 'react';
import '../App.css';
import DisplayInvoice from './displayInvoice';
import DisplayCustomer from './displayCustomer';
import DisplayMonth from './displayMonth';
import DateSelector from './dateSelector';
var axios = require('axios');
class MonthToDate extends Component {
constructor(props){
super(props);
this.state = {
data:null,
invoiceType:'invoice',
urlInvoices:'',
urlCustomer:'',
isDateSet:false
}
//console.log(this.props.location.state.token);
this.groupBySelector = this.groupBySelector.bind(this);
}
groupBySelector(event){
if ((event.target.value)==="invoice"){
this.setState({invoiceType:'invoice'})
} else if ((event.target.value)==="customer") {
this.setState({invoiceType:'customer'})
} else if ((event.target.value)==="month") {
this.setState({invoiceType:'month'})
} else {
this.setState({invoiceType:'invoice'})
}
}
urlProducer = (date) => {
this.setState({
urlInvoices: ("http://localhost:3000/api/invoices"+date),
urlCustomer: ("http://localhost:3000/api/invoices"+date+"&group-by=customerNumber"),
isDateSet: true
}, () => {console.log(this.state.urlCustomer);});
}
render() {
return (
//<DateSelector />
<div>
<DateSelector dateOnSelect={this.urlProducer}/>
<select onChange={this.groupBySelector}>
<option value="invoice">GROUP BY INVOICE</option>
<option value="customer">GROUP BY CUSTOMER</option>
<option value="month">GROUP BY MONTH</option>
</select>
<GroupBy token={this.props.location.state.token} invoiceType={this.state.invoiceType} isDateSet={this.state.isDateSet} urlInvoices={this.state.urlInvoices} urlCustomer={this.state.urlCustomer}/>
</div>
);
}
}
export default MonthToDate;
function GroupBy(props) {
if (props.invoiceType=='invoice') {
return <DisplayInvoice token={props.token} url={(props.isDateSet) ? (props.urlInvoices) : "http://localhost:3000/api/monthtodate"}/>;
} else if (props.invoiceType=='customer') {
return <DisplayCustomer token={props.token} url={(props.isDateSet) ? (props.urlCustomer) : "http://localhost:3000/api/monthtodate?group-by=customerNumber"}/>;
} else if (props.invoiceType=='month') {
return <DisplayMonth token={props.token}/>;
}
}
：
child component这是DateSelector（即import React, { Component } from 'react';
import '../App.css';
import Moment from 'moment';
class DateSelector extends Component {
constructor(props){
super(props);
this.state = {
startDate:"",
endDate:""
}
}
dateHandler = (event) => {
this.props.dateOnSelect("?startDate="+Moment(this.state.startDate).format('YYYY/MM/DD')
+"&endDate="+Moment(this.state.endDate).format('YYYY/MM/DD'));
}
startDateOnChange = (event) => {
this.setState({startDate: event.target.value});
}
endDateOnChange = (event) => {
this.setState({endDate: event.target.value});
}
render() {
return (
<div>
START DATE<input type="date" id="startDate" value={this.state.startDate} onChange={this.startDateOnChange}/>
END DATE<input type="date" id="endDate" value={this.state.endDate} onChange={this.endDateOnChange}/>
<button type="submit" onClick={this.dateHandler}>Submit</button>
</div>
);
}
}
export default DateSelector;
）：
child component这是另一个DisplayInvoice，即groupBySelector()（它应该在urlProducer = (date) =>{}和import React, { Component } from 'react';
import '../App.css';
import ListData from './listdata.js'
var axios = require('axios');
class DisplayInvoice extends Component {
constructor(props){
super(props);
this.state = {
data:[],
url:"http://localhost:3000/api/monthtodate",
baseUrl:"http://localhost:3000/api/monthtodate",
billed:false,
pending:false
};
}
componentWillMount() {
this.loadRevenue(this.state.url, this.props.token);
console.log(this.props.url); //trying to print the urlProducer's value here
}
setData(data){
this.setState(data:data);
}
loadRevenue(url,token){
axios({
method:'get',
url:url,
headers: {
Authorization: `Bearer ${token}`,
},
})
.then( (response) => {
this.setData(response.data);
})
.catch(function (error) {
console.log("Error in loading Revenue "+error);
});
}
togglePending = () => {
this.setState((prevState) => ({pending: !prevState.pending}), () => {
// console.log("BILLED"+this.state.billed+" PENDING"+this.state.pending);
this.filter(this.state.billed, this.state.pending);
});
}
toggleBilled = () => {
this.setState((prevState) => ({billed: !prevState.billed}), () => {
// console.log("BILLED"+this.state.billed+" PENDING"+this.state.pending);
this.filter(this.state.billed, this.state.pending);
});
}
filter = (billed,pending) => {
if(billed==true && pending==true){
this.setState((prevState) => ({url: prevState.baseUrl+"?invoicestatus=BILLED,PENDING"}), () => {this.loadRevenue(this.state.url, this.props.token)});
} else if (billed==true && pending==false) {
this.setState((prevState) => ({url: prevState.baseUrl+"?invoicestatus=BILLED"}), () => {this.loadRevenue(this.state.url, this.props.token)});
} else if (billed==false && pending==true) {
this.setState((prevState) => ({url: prevState.baseUrl+"?invoicestatus=PENDING"}), () => {this.loadRevenue(this.state.url, this.props.token)});
}else if (billed==false && pending==false) {
this.setState((prevState) => ({url: prevState.baseUrl}), () => {this.loadRevenue(this.state.url, this.props.token)});
}
}
render() {
let { pending, billed } = this.state;
return (
<div>
<div>
<input type="checkbox" name="invoicestatus" checked={billed} onChange={this.toggleBilled} value="BILLDED" />BILLDED<br />
<input type="checkbox" name="invoicestatus" checked={pending} onChange={this.togglePending} value="PENDING" />PENDING<br />
</div>
<ListData data={this.state.data}/>
</div>
);
}
};
export default DisplayInvoice;
上更新，因为两者都在更新父组件的状态）：
reduxtemplate<class T>
class const_wrapper
{
struct Inner { const T value; };
// non-const member, so const_wrapper is accessible through its name or pointer to it?
Inner wrapped_value;
public:
const_wrapper(const T& v) : wrapped_value({v}) {}
const_wrapper(T&&) : wrapped_value({std::move(v)}) {}
operator const T& () {
// accessed through launder -> Ok?
return std::launder(&wrapped_value)->value;
}
};
。