分配对象时,React Redux存储不会更新

时间:2017-01-11 04:33:33

标签: javascript reactjs redux

所以我有这个功能:

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>
    );
}

0 个答案:

没有答案