所以我有这个功能:
send_data({ pathname, data })
{
$.ajax({
url: "src/php/search.php",
beforeSend: () =>{
// this.props.dispatch( { type: "set_loading", payload: true } );
},
data: {
type: "write_report",
part: pathname,
data
},
method: "post",
success: (r) =>
{
console.log("I am sending the data and getting something back")
console.log(r);
console.log("after r");
// this.props.dispatch( { type: "set_loading", payload: false } );
Important>> this.props.dispatch({ type: "set_report", payload: JSON.parse(r) });
}
})
}
它的作用是将一些数据发送到php后端,后端然后用json字符串进行响应,我解析它来创建一个对象。
这是我的reducer代码:
const componentReducer = (state = default_component, action) => {
switch(action.type)
{
case "set_report":
{
state = {...state, report: action.payload};
break;
}
}
return state;
我知道商店正在更新,因为当我打印this.props.report
(我正在使用的对象)时,它会在之前和之后获得不同的内容:
在:
Object {assessors=[3], report=Object, risks=[4], ...}
在:
Object {assessors=[2], report=Object, risks=[4], ...}
但是显示不会更新。
但是!!!如果我发送一个空对象{}
this.props.dispatch({ type: "set_report", payload: {} });
它会重新渲染组件(我还有一些代码可以检查报告对象是否为空,因此会返回一个对象)
渲染组件信息(为简洁起见,缺少一些东西):
add_repeat(default_user)
{
this.repeats.push(<StartMultiple key={this.count} default_user={default_user} users={this.props.users} id={this.count} delete_this={this.delete_this} />);
this.setState({ repeats: this.repeats });
this.count++;
}
render()
{
return(
<div>
<p><b>Date</b></p>
<span>Select the date when assessment was performed:</span>
<input id="datepicker" name="datepicker" type="text" readOnly/>
<div>
(<i>If the select is empty, but you know there should be someone in it. That person may be no longer at the institute. If that person should exist, please notify ITS.</i>)
</div>
<div>
{this.state.repeats}
</div>
<button className="btn btn-default" onClick={this.add_repeat.bind(this, "none")}>Add Assessor</button>
</div>
);
}
}
const Start = connect(
(store) =>
{
return {
number: store.component.number,
report_id : store.component.report_id,
assessors: store.component.report.assessors,
users: store.component.users,
date: store.component.report.report.date,
};
}) (StartComponent);
export default Start;
子组件:
render()
{
var { users } = this.props;
users = {"none": "", ...users};
return(
<div>
<p><b>Assessor</b></p>
<select name="assessor" defaultValue={this.props.default_user}>
{ Object.keys(users).map( (key, index) => <option key={index} value={users[key]}>{users[key]}</option> ) }
</select>
<span style={{ display : "inline-block", paddingLeft : "10px"}}>
<button className="btn btn-default" onClick={this.delete_this.bind(this, this )}>Delete</button>
</span>
</div>
);
}