React - 渲染前的 SetState

Question

Table on Render

Table on Render after new row

Table on Render after second new row

I have a page rendering servers names title etc..

It has a count of the servers that are online,offline and warning. When it first renders it works fine, but when i add a server and it to the array.

It updates the rows but not the server count because it hasnt rendered until after i update the server count.

I used componentDidMount to fix that on startup but not on update.

Not sure if you need more information.

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;
  }