Question

我想每1秒打印一次输出，但是出现以下错误。我以为read方法被同步调用，但事实并非如此。有人可以解释read方法的执行方式以及为什么会出现此错误吗？

const PictureArt = (props) => {

    const containerStyle = {
        display: 'flex',
        justifyContent: 'center',
        padding: '30px'
    }

    const imageStyle = {
        width: '100%',
        height: 'auto',
        borderRadius: '5px',
        boxShadow: '5px 5px 20px',
    }

    const captionStyle = {
        fontSize: '200%', color: 'grey', textAlign: 'center'
    }

    const descriptionStyle = {
        fontSize: '150%',
        border : '1px ridge brown' , 
        borderRadius : '20px' , 
        padding:'30px' ,
        color: 'rgba(100,100,100,0.8)',
        textAlign: 'center'
    }

    const LoadingIcon = () => {
        return (
            <div className="rotatingLoader" style={{
                borderRadius: '50%',
                borderWidth: '5px',
                height: '100px',
                width: '100px',
                border: '35px solid grey',
                borderTop: '30px ridge rgba(128,128,255,0.8)',
                borderRight: '3px ridge rgba(128,100,128,0.8)',
                borderLeft: '3px ridge rgba(128,155,100,0.8)',
                borderBottom: '30px ridge rgba(228,100,100,0.8)',
            }}> </div>
        )
    }

    const [items, setItems] = useState({
    url: 'http://4.bp.blogspot.com/-mZwB8lpO3-0/UN1r7ZrbjnI/AAAAAAAADBU/rqa5a2DD_KY/s1600/White_Flower_Closeup.jpg',
    caption: 'flower',
    description: "When the flower looked beautiful ... "
}, {
    url: 'http://4.bp.blogspot.com/-mZwB8lpO3-0/UN1r7ZrbjnI/AAAAAAAADBU/rqa5a2DD_KY/s1600/White_Flower_Closeup.jpg',
    caption: 'flower',
    description: "When the flower looked beautiful ... "
});
    const [currentIndex, setCurrentIndex] = useState(0);
    const [color, setColor] = useState('red')

    useEffect((props)=>{
        console.log('current index = ' , currentIndex)
    },[currentIndex])


    const totalItems = items.length ; 

    const picTransition = useTransition(currentIndex , null, {
        from: { opacity: '0', transform: `rotate(90deg) translate3d(${window.innerWidth * 0.8}px,0px,0)` },
        enter: [{ opacity: '1', transform: 'rotate(0deg) translate3d(0,0,0)' }],
        leave: { opacity: '0', transform: `rotate(-90deg) translate3d(${-window.innerWidth}px , 0px , 0)` },
        config: {
            tension: '30',
            friction: '10'
        }
    })
    const currentItem = items[currentIndex] ; 

    return (
        <>
            <button onClick={e=>setCurrentIndex((currentIndex+1)%totalItems)}>"+"</button>
            <div>
                <div className="container" style={containerStyle}>
                    {
                        picTransition.map(({ item, props, key }) => {
                            return (
                                <animated.div className="MainSlide" style={props} key={key}>
                                    <div style={{ width: '500px' }}>
                                        <Img src={currentItem.url} style={imageStyle} loader={<div style={{ transform: 'translate3d(50%,50%,0)', top: '50%', bottom: '50%' }}><LoadingIcon /></div>}  ></Img>
                                    </div>
                                    <div style={captionStyle}>
                                        <p>{currentItem.caption}</p>
                                    </div>
                                    <div style={descriptionStyle}>
                                        <p>{currentItem.description}</p>
                                    </div>
                                </animated.div>)
                        })
                    }

                </div>
            </div>
        </>
    );
}

我收到此错误：

const {Readable} = require('stream');

var out = new Readable({

    read(size){
        console.log('read');

        setTimeout(()=>{


        console.log(this.k);

        console.log('before push');

        this.push(String.fromCharCode(this.k++)+'\n');

        console.log('after push\n');
        if(this.k>65){
            this.push(null);
            console.log('null\n');
        }

    },1000);


    }

});
out.k = 65;
out.pipe(process.stdout);

Answer 1

当您按下null时，您正在关闭流，但是没有清除超时，因此您尝试在关闭的流上进行写操作。像这样尝试：

const { Readable } = require('stream');

var prevTimeout;
var out = new Readable({

    read(size) {

        prevTimeout = setTimeout(()=> {

            console.log(this.k);

            this.push(String.fromCharCode(this.k++)+'\n');

            if (this.k > 67) {

                this.push(null);

                clearTimeout(prevTimeout);
            }
        },
        500);
    }
});

out.k = 65;

out.pipe(process.stdout);

有关流的更多信息：https://nodejs.org/api/stream.html#stream_readable_streams

Answer 2

对于以后要阅读此书的任何人：

如果使用节点的更新版本，则不会重现此行为。对此的详细讨论可以在这里找到：

github.com/nodejs/node/issues/3203#issuecomment-355137794

从流读取时，NodeJs可读错误

2 个答案: