Question

我需要创建一个功能性的react组件，该组件会在每次发生特定事件时自动更新内部数据。

我在下面编写了代码，但是每次调用回调时，都会重新呈现该组件，并且变量myArray设置为空数组，而不是被回调中的所有内容填充。

我在做什么错？我应该使用什么方法？

// event emulation
function onEventEmulator(callback, interval = 1000) {
    setInterval(() => callback('content'), interval);
}

function PollingComponent(props) {
    const [myArray, setMyArray] = useState([]);
    useEffect(() => {
        onEventEmulator(content => {
            setMyArray([...myArray, content]);
        });
    }, []); // with or without passing the empty array as second param, result does not change.
    return <ul>
        <li>Callback</li>
        <li>{myArray.length}</li>
    </ul>;
}

Answer 1

让我们尝试一下：

spring.datasource.url=jdbc:cloudspanner:/projects/my-project-id/instances/some-instance/databases/some-db?credentials=/path/to/credentials.json
spring.datasource.driver-class-name=com.google.cloud.spanner.jdbc.JdbcDriver
spring.jpa.database-platform=com.google.cloud.spanner.hibernate.SpannerDialect

然后：

function onEventEmulator(callback, interval = 1000) {
  setInterval(() => callback("content"), interval);
}

这里缺少的一件事是清除function PollingComponent(props) { const [myArray, setMyArray] = useState([]); useEffect(() => { onEventEmulator(content => { setMyArray(arr => [...arr, ...content]); }); }, []); return ( <ul> <li>Callback</li> <li>{myArray.length}</li> </ul> ); }的方法，但是我想这不是您关心的问题。

React useEffect不会阻止重新渲染

1 个答案: