Question

我有一个页面渲染服务器名称标题等。

它具有在线，离线和警告服务器的数量。当它第一次渲染时，它工作正常，但是当我将服务器添加到阵列中时。

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

我使用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;
  }

在渲染之前反应-SetState

1 个答案: