javascript - 在函数中设置状态不起作用 - reactJs

Question

更新:在将数据发送到包含端点的 updateEvent 函数之前，我已经记录了三行代码。以下是日志:

the new event date is 2019-01-01T01:00:00.000

the new SET event date is: 2019-01-01T01:00

the event detail is: {date: "2019-01-01T01:00" …}

状态再次未设置为新格式​​。谁能看出错误可能是什么？

我正在尝试呈现事件日期以作为正文发送到端点。用户能够在 TextInput 字段中输入日期，但是在我发送事件日期之前，我想修改其格式，使用 moment. js inside updateEvent cb (YYYY-MM-DDTkk:mm:ss.SSS")，因此我创建了一个新变量

newDate

但是，updateEvent 内部的 setState 实际上并没有设置状态，而是保持 date 的值，因为它已经在 handleEventInputChange 中设置了。我怀疑这可能是由于在 handleEventInputChange 和 handleEvent 中将状态设置为同一个状态变量两次。任何人都可以确认和/或提出解决方案吗？

 //... import and styles 
class EditEvent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            event: {
                date: '',
            },
        };

        this.handleEventInputChange = this.handleEventInputChange.bind(this);
        this.updateEvent = this.updateEvent.bind(this);
    }

    handleEventInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            event: {
                ...this.state.event,
                [name]: value
            }
        });
    }

    updateEvent() {
        const { event } = this.state;
            let newDate = moment(this.state.event.date).format("YYYY-MM-DDTkk:mm:ss.SSS");

            this.setState(() => ({
                event: {
                    ...this.state.event,
                    date: newDate,
                }}))


            console.log("the new event date is ", newDate)
            console.log("the new SET event date is: ", event.date)
            console.log("the event detail is: ", event)

            this.props.updateEvent(this.props.event.id, event);
    }

    renderEvent() {
        const {
            event,
        } = this.state;

        return (
            <div>
                <Paper style={styles.paper}>
                    <TextField
                        name="date"
                        type="datetime-local"
                        onChange={this.handleEventInputChange}
                        value={event.date}/>
                </Paper>
            </div>
        );
    }

    render() {
        return (
            <ViewContainer
                title="Update Event"
                toolbarRight={
                    <Button
                        onClick={this.updateEvent}
                    > Save
                    </Button>
                }
            >
                {this.renderEvent()}
            </ViewContainer>
        );
    }
}

//... mapStateToProps, mapDispatchToProps and export default connect for EditEvent

Answer 1

根据您提供的代码，您正在尝试设置 [name]: value里面setState()处理程序 handleEventInputChange(event) , 但您尚未设置从 event 分配的值value 的参数属性(property)。您需要按照 const value = target.value; 添加一些内容在将其传递给 setState() 之前:

handleEventInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value; // add this

    this.setState({
        event: {
            ...this.state.event,
            [name]: value
        }
    });
}

您还可以考虑使用解构:

handleEventInputChange(event) {
    const target = event.target;
    const { name, value } = target;

    this.setState({
        event: {
            ...this.state.event,
            [name]: value
        }
    });
}

更新: onChange对于 <input type="datetime-local" />将仅 fire当 <input type="datetime-local" /> 的所有部分已填写包括日、月、年、小时、分钟和上午/下午。我正在创建一个 example显示此功能的实际效果。您的代码更改为设置 value 的值似乎工作。如果目标是始终显示格式化日期，您可以考虑创建另一个状态属性来保存格式化值以避免更改 this.state.event.date什么时候updateEvent()由按钮点击触发。这样你就可以避免覆盖 this.state.event.date不断地。

更新 2::根据评论，我拼凑出您试图具体解决的问题是传递给映射操作分派(dispatch)的值。您可以尝试使用 setState()回调，第二个参数，调用 this.props.updateEvent() .你通过this.event.state是关键进入 this.props.updateEvent() 的第二个参数否则您将传递旧的/原始的事件值。 example已更新以反射(reflect)这一点。

updateEvent() {
    const { event } = this.state;
    let newDate = moment(this.state.event.date).format("YYYY-MM-DDTkk:mm:ss.SSS");

    this.setState({
      event: {
        ...this.state.event,
        date: newDate,
      }
    }, () => {
      this.props.updateEvent(this.props.event.id, this.state.event);
    });            
}

希望对您有所帮助!