Question

我有一个express.js服务器，提供简单的更改字符串"Hello $n"。 n每秒钟更改一次。

我有一个react.js应用程序，它每秒获取服务器的url并返回它，但是不知何故，DOM无法呈现/显示预期的输出：

server.js（以node server.js运行）：

var express = require('express');
var app = express();

var n = 0
setInterval(function() {
    n++
}, 1000);


app.get('/', function (req, res) {
    console.log('GET / %s', n)
    res.status(200).send('Hello $n');
})

var server = app.listen(8081, "127.0.0.1", function () {
    var host = server.address().address
    var port = server.address().port

    console.log("Example app listening at http://%s:%s", host, port)
})

App.js（以yarn start运行）：

import React, { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
}


function App() {
    const fetchDelay = 1000;
    const [data, setData] = useState('bla')

    useInterval(() => {
        const fetchData = async () => {
            const resp = await fetch('http://localhost:8081/');
            const respData = await resp.json();
            console.log(resp)
            console.log(respData)

            setData('blabla');
        };
        fetchData()
    }, fetchDelay);

  return (
    <div className="App">
        { data }
    </div>
  );
}

export default App;

预期结果：浏览至http：// localhost：3000 /时，我希望第一秒钟看到bla，因为这是初始状态，一秒钟后，我希望它能从服务器更改为n的值
结果：它停留在bla

我认为异步回调应该在不同的过程中更新data，然后由主React应用呈现，但不会发生。为什么？

即使返回的数据已更改，react也不会呈现DOM

0 个答案: