首页 > 解决方案 > 如何在组件中显示输出而不是控制台日志

问题描述

我在 react 中创建了一个快速的 app.js 文件,它通过 console.log 向我显示数字是素数还是不是每隔 1 秒到无穷大,我想让它在浏览器本身中呈现“我的意思是" 而不是 console.log ,有什么想法吗?

import {useInterval} from "../hooks/use-interval";
let num = 0
export default function Task1Prime() {
    const isPrime = num => {
        for(let i = 2; i < num; i++)
            if(num % i === 0) return num+" isnt prime number";
        return num+ " is prime number";
    }
    useInterval(function (){
        console.log(isPrime(num++));

    },1000)
    return (
        <div className="task">
        </div>
    );
} ```

标签: javascriptreactjs

解决方案


import {useInterval} from "../hooks/use-interval";
import {useState} from "react";
let num = 0
export default function Task1Prime() {

    const isPrime = num => {
        for(let i = 2; i < num; i++)
            if(num % i === 0) return num+" isnt prime number";
        return num+ " is prime number";
    }
    const [isNumPrime, setIsNumPrime] = useState(isPrime(num))
    useInterval(function (){
        setIsNumPrime(isPrime(num++));

    },1000)
    return (
        <div className="task">
            { isNumPrime }
        </div>
    );
}

使用状态变量 isNumPrime 并使用函数更新它,它会自动更改页面上的元素。


推荐阅读