Question

我有一个组件，我在第一个setState（）中将第二个setState（）作为回调。这种做法很糟糕吗？还有另一种同步调用两个setStates的方法吗？

最初，当我在第一个setState（）中调用updateData（）时，在myComponent组件中呈现正确数据时出现延迟。这是一个步骤＆＃39;背后。这有效，但它是常规吗？

import React, { Component } from "react";
import MyComponent from "../../components/MyComponent";
import RaisedButton from "material-ui/RaisedButton";
import { generateData } from "./generateData";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      data: []
    };
  }

  updateData(){
    this.setState({
      data: generateData(this.state.text)
    })
  }

  handleChange(e) {
    this.setState({
      text: e.target.value
    }, () => {
      this.updateData(this.state.text)
    });
  }

  handleSubmit(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div>
        <h2>Input</h2>
        <form onSubmit={e => this.handleSubmit(e)}>
          <textarea
            value={this.state.text}
            onChange={e => this.handleChange(e)}
          />
          <div>
            <RaisedButton type="submit"/>
          </div>
        </form>
        <h2>Output</h2>
        <MyComponent data={this.state.data} />
      </div>
    );
  }
}

export default App;

Answer 1

问题似乎是您正在data更新this.state.text。相反，您可以通过引用原始输入值在单个调用中同时更新text和data：

handleChange(e) {
  this.setState({
    text: e.target.value,
    data: generateData(e.target.value),
  });
}

这对于对setState进行两次调用肯定是首选（这意味着可能会对组件进行两次重新渲染）。

在回调中制作第二个setState - 不好的做法？

1 个答案: