javascript - 在表单提交时调用 `componentDidUpdate`

Question

我有一个类组件如下:

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            abc: '',
            someQuery: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidUpdate(){
        fetch(`/someLink/${this.state.abc}`)
        .then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                someQuery: data.xxx
            });
        });
    }
    handleSubmit(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        })
        e.preventDefault();
    };
    handleChange(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        });
    };
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input name='abc' value={this.state.abc} onChange={this.handleChange} />
                <input type="submit" value="Submit" />
            </form>

            <div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
        )
    }
}

---

每次更新输入字段的值并单击提交按钮时，如何运行 componentDidUpdate()？

上面调用了生命周期，但由于 handleChange() 中的 setState ，生命周期在我输入内容时被调用，但没有等到提交按钮被点击。

从 handleChange() 中删除 setState 使输入字段值不再可编辑(无法在输入字段上键入)。

我需要在生命周期中将输入字段值附加到 api 链接，但我似乎无法找到执行此操作的正确方法。

Answer 1

您可以在组件类中添加任何方法并在提交时调用它。 componentDidUpdate 不是做这种事情的正确位置，尤其是设置状态是犯罪 :D

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            abc: '',
            someQuery: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    doSommething (value){
        fetch(`/someLink/${value}`)
        .then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                someQuery: data.xxx
            });
        });
    }
    handleSubmit(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        })
        e.preventDefault();
        doSommething(value);
    };
    handleChange(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        });
    };
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input name='abc' value={this.state.abc} onChange={this.handleChange} />
                <input type="submit" value="Submit" />
            </form>

            <div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
        )
    }
}