Question

我还是React的新手。我对我的问题进行了一些研究，但对我的情况并没有真正找到一个好的答案。所以基本上我有一个服务器，其中包含一系列学生信息。加载页面并且服务器处于联机状态时，将在页面上呈现与学生一起列出的列表。我现在的问题是：如何在服务器脱机时重新呈现页面而不必刷新它？

这是我将数组的详细信息放在this.state中的代码：

SRCP = \
  main.c \
  lib/src/stm32f10x_tim.c \
  lib/src/stm32f10x_adc.c

OBJ_DIR = ./Release/Obj
OBJ_FILES := $(addprefix $(OBJ_DIR)/,$(notdir $(SRCP:.c=.o)))

# Linker invocation
$(OUTPUT_DIR)/$(PROJECT).elf: $(OBJ_FILES)
    $(CC) $(LDFLAGS) $(OBJ_FILES) $(STD_LIBS) -o $(OUTPUT_DIR)/$(PROJECT).elf

# Rules
$(OBJDIR)/%.o: ./%.c
    $(CC) $(CFLAGS) -c $< -o $@
$(OBJDIR)/%.o: lib/src/%.c
    $(CC) $(CFLAGS) -c $< -o $@

这是我呈现的内容：

constructor(props) {
    super(props);
    this.state = {

        students: [],

        student: {

            name: '',

        }

    };

}

componentWillMount() {

    getServerData.getAll().then(response => {

        this.setState({students: response.message});


    });

}


placeStudents() {

    return this.state.students.map((student, i) => (

       <li key={i}> <Student name={student.name} id={student.id}/></li>

    ));

}

基本上我想要实现的是，每当服务器脱机时都会显示render() { return ( <div> <ul>{this.state.students.length ? this.placeStudents() : <p>Server offline</p>}</ul> </div> ); }，而不必刷新整个页面。

以下是我的Ajax调用的样子：

<p> Server offline </p

}

任何提示？提前致谢

Answer 1

如果我理解了您的问题，我认为您会问，＆＃34;网站如何显示：＆＃39;服务器离线＆＃39;每当服务器不再可用时。＆＃34;

您有几个选择：

使用websocket并处理连接丢弃事件
使用AJAX轮询服务器（每1秒钟或某事），如果服务器无法响应，则显示不可用的消息

如果您选择选项2，我会在我的服务器上创建一个真正的简单端点，除了使用HTTP 204状态代码进行响应之外什么都不做。

说实话，我建议不要做其中任何一项。它可能不值得增加复杂性。我首先询问我的应用是否真的需要此功能。最有可能的是，它没有。

[编辑：正如尼古拉斯指出的那样，204是选项2的正确状态代码......我很懒惰！]

Answer 2

您需要使用类似setInterval的内容在常规时基上从服务器中获取学生。下面是您的代码的样子

class Whatever extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        students: [],
        student: {
            name: '',
        }
    };
    // bind "this"
    this.getStudentsFromServer = this.getStudentsFromServer.bind(this);
    
    this.students = [{name: 'test1'},{name: 'test2'},{name: 'test3'}];
    }

  componentWillMount() {
    setInterval(this.getStudentsFromServer, 1000); // every 1 second.
  }
  
  componentDidMount() {
    this.getStudentsFromServer();
  }
  // this simulates fetching data from server
  getStudentsFromServer() {
    let p = Promise.resolve({message: this.students});
     p.then(response => {
        this.setState({students: response.message});
        this.students.shift();
    });
  }
  
  placeStudents() {
    return this.state.students.map((student, i) => (<li key={i}>
         <p>name: {student.name}</p>
       </li>));
  }

 render() {
    return (
        <div>
            <ul>
            {this.state.students.length > 0 ? this.placeStudents(): 
           <p>Server offline</p>}
           </ul> 
        </div>);
    }
}

ReactDOM.render(
  <Whatever />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

如何在服务器脱机后重新呈现this.state

2 个答案: