javascript - reactjs 获取 PUT 值并将值传递给状态

Question

class Mycomponent extends Component {
    state = {
        text: null
    }

    componentDidMount() {
        fetch("http://localhost:3000/books/4")
          .then(response => response.json())
          .then(data => this.setState({ text: data.title  // this data.value is "Learn Javascript" }));
    }

    fetchPUT(val) {
    fetch("http://localhost:3000/books/4", {
        method: "PUT",
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify({ value: val })
        }).then(e => console.log(e));
    }

     onMouseDown = e => {
        this.setState({
          text: this.refs.myinput.value,
        });
        this.fetchPUT(this.refs.myinput.value);
    };
    render() {
        const { text } = this.state;
        return (
            <div>
                <input
                  type="text"
                  value={text}
                  onMouseLeave={this.onMouseLeave}
                  ref="myinput"
                />
            </div>
        )
     }
}

每当我单击按钮以PUT 值时，我都想同步this.text。所以流程是先fetch然后改变值，点击按钮PUT值，在PUT之后，然后再次fetch

Answer 1

您不必从后端获取数据来将值与当前文本同步。而是在 onMouseDown 中使用 setState 回调作为:

onMouseDown = e => {
        this.setState({
          text: this.refs.myinput.value,
        }, () => {
           this.fetchPUT(this.refs.myinput.value);
        });
    };

此处状态将在调用 put 之前设置，并且由于您拥有更新后的值，因此您不必获取该值。当组件被卸载并再次安装时，它将从您的 componentDidMount 中获取更新后的值。

阅读更多 here

还有

在渲染函数中，使用 onChange 而不是 onMouseDown(您甚至没有使用它)，因为这样会减少混淆。使用 debounce这样您就不必在每次更改时都进行多次 API 调用。

onChange = _.debounce((event) => {
   const text = event.target.value;
   this.setState({text}, () => {
       this.fetchPUT(text);
   })
}, 500)

render() {
        const { text } = this.state;
        return (
            <div>
                <input
                  type="text"
                  value={text}
                  onChange={this.onChange}
                />
            </div>
        )
     }