问React 16读取状态问题
EN

Stack Overflow用户

提问于 2020-09-22 16:51:18

回答 1查看 44关注 0票数 1

我有以下组件

import React, { useState } from 'react';

const Test = () => {
    const [streaming, setStreaming] = useState(false);
    
    const turnStreamingOn = () => {
        setStreaming(true);
        process();
    }
    
    const process = () => {
        console.log('streaming:', streaming);
    }
    
    return (
        <div>
            <button onClick={() => {
                turnStreamingOn();
            }}>{streaming ? 'streaming' : 'not streaming'}</button>
        </div>
    )
};

export default Test;

单击按钮时，我们在UI中有'streaming‘，但'process’函数中的console.log显示它是假的。我做错了什么？如何正确读取状态？

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-22 16:54:54

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

const Test = () => {
    const [streaming, setStreaming] = useState(false);
    
    const turnStreamingOn = () => {
        setStreaming(true);
    }

    useEffect(() => {
      console.log('streaming: ', streaming)
    }, [streaming])
    
    return (
        <div>
            <button onClick={() => {
                turnStreamingOn();
            }}>{streaming ? 'streaming' : 'not streaming'}</button>
        </div>
    )
};

export default Test;

为此，您应该使用useEffect。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64006209

复制

相似问题

问React 16读取状态问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React 16读取状态问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React 16读取状态问题
EN