React - 渲染前的 SetState

Question

Table on Render

Table on Render after new row

Table on Render after second new row

我有一个页面呈现服务器名称标题等。

它有在线、离线和警告的服务器计数。 当它第一次渲染时它工作正常，但是当我添加一个服务器并将它添加到数组时。

它更新行但不更新服务器计数，因为它直到我更新服务器计数后才呈现。

我使用 componentDidMount 在启动时修复该问题，但在更新时没有。

不确定您是否需要更多信息。

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

    this.state = {
      serverCount: [],
      servers: [
        {
          host: "192.168.57.2",
          status: "Online",
          title: "Server",
          location: "Location"
        },
        {
          host: "192.168.57.1",
          status: "Offline",
          title: "Server",
          location: "Location"
        },
        {
          host: "192.168.57.0",
          status: "Warning",
          title: "Server",
          location: "Location"
        }
      ]
    };

    this.handleFormData = this.handleFormData.bind(this);
  }

  handleServerCount() {
    let newArr = [0,0,0,0]

    this.state.servers.map(data => {
      let status = data.status
      if(status === "Online"){
        newArr[1]++
      } else if (status === "Warning") {
        newArr[2]++
      } else {
        newArr[3]++
      }
      newArr[0]++
    })
    return newArr;
  }

  handleFormData(data) {
    let newArr = this.handleServerCount();
    let newState = this.state.servers.slice();
    newState.push(data);

    this.setState({
        servers: newState,
        serverCount: newArr
    });
  }

  componentDidMount(){
    let newArr = this.handleServerCount();

    this.setState({
      serverCount: newArr
    })
  }
  render() {
    return (
      <Default>
        <div className="upperContainer">
          <ServerCount serverCount={this.state.serverCount} />
          <RequestTimer />
        </div>
        <ServerList serverList={this.state.servers} />
        <Input handleFormData={this.handleFormData} />
      </Default>
    );
  }
}



    class ServerList extends Component {
        render() {
            const rows = [];

            this.props.serverList.forEach((server) => {
                rows.push(
                    <ServerRow key={server.host}
                        title={server.title}
                        host={server.host}
                        location={server.location}
                        status={server.status}/>
                )
            })
            return (
                <ListTable>
                    <ServerHeader/>
                    {rows}
                </ListTable>
            )
        }
    }

const ServerCount = (props) => {
    return (
        <CountContainer>
            <div className="circleContainer">
                <div className="total serverCircle">
                    {props.serverCount[0]}
                </div>
                Total
            </div>
            <div className="circleContainer">
                <div className="Online serverCircle">
                    {props.serverCount[1]}
                </div>
                Online
            </div>
            <div className="circleContainer">
                <div className="Warning serverCircle">
                    {props.serverCount[2]}
                </div>
                Warning
            </div>
            <div className="circleContainer">
                <div className="Offline serverCircle">
                    {props.serverCount[3]}
                </div>
                Offline
            </div>
        </CountContainer>
    )
}

class Input extends Component {
    constructor(props) {
      super(props);
      this.state = {
          host: "",
          title: "",
          location: ""
      }

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e){
        const {name, value} = e.target;

        this.setState({
            [name]: value
        })
    }

    handleSubmit(e) {
        e.preventDefault();

        var newServer = {
            host: this.state.host,
            status: "Warning",
            title: this.state.title,
            location: this.state.location,
        }

        this.setState({
            host:'',
            title:'',
            location:''
        })

        this.props.handleFormData(newServer);
    }

    render() {
      return (
          <InputForm onSubmit={this.handleSubmit}>
            <input name="host" value={this.state.host} onChange={this.handleChange} placeholder="10.10.10.0"></input>
            <div><span>Unknown</span></div>
            <input name="title" value={this.state.title} onChange={this.handleChange} placeholder="Live Server"></input>
            <input name="location" value={this.state.location} onChange={this.handleChange} placeholder="Knutsford"></input>
            <button type="submit"></button>
          </InputForm>
      );
    }
  }

Answer 1

handleServerCount() {

let newArr = [...this.state.serverCount]

    this.state.servers.map(data => {
      let status = data.status
      if(status === "Online"){
        newArr[1]++
      } else if (status === "Warning") {
        newArr[2]++
      } else {
        newArr[3]++
      }
      newArr[0]++
    })
    return newArr;
  }