反应内联样式不适用

Question

嘿伙计们，我只是想渲染一组包含新闻文章的段落。 我正在使用内联样式方法创建 object 并使用 style 属性将其值分配给<h2>标记。

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


const App = () => {

    //inLineStyles
    const useStyle = {
    backgroundColor: "#282c34",
    color: "white",
    padding: "40px",
    fontFamily: "Arial",
    textAlign: "center",
    };


    //State
    const [news, setNews] = useState([]);
    const [searchQuery, setSearchQuery] = useState("")
    const [url, setUrl] = useState("http://hn.algolia.com/api/v1/search?query=Hacker")
    const [loading, setLoading] = useState(false);
    //APIcall
    const fetchNews = () => {
        setLoading(true);
        fetch(url)
            .then(responce => responce.json())
            .then(data => (setNews(data.hits), setLoading(false)))
            .catch(error => console.log(error))

    }
    useEffect(() => {
        fetchNews();
    }, [url])

    const handleChange = (e) => {
        setSearchQuery(e.target.value)

    }
    const handleSubmit = e => {
        e.preventDefault()
        setUrl(`http://hn.algolia.com/api/v1/search?query=${searchQuery}`)
    }

    const handleLoading = () => {

        if (loading) {
            return <h2> Loading...</h2>
        }
        else {
            return 
        }
    }


return (
    <div>
        <h1 style={useStyle}>News </h1>
         { handleLoading() }
        <form onSubmit={handleSubmit}>
            <input type='text' value={searchQuery} onChange={handleChange}/>
                <button>Search</button>
            </form>
        {news.map((n, i) => (
            <p key={i}> {n.title} </p>
        ))}
    </div>
  );
}

export default App;

你能告诉我为什么没有应用这种风格吗？ 谢谢！

Answer 1

我被困了半天。 我终于能够弄清楚了。 我所要做的就是在浏览器中刷新页面（我在代码编辑器中保存和编译代码，由于某种原因它没有更新 web 页面）。 如果有人可能知道为什么会发生这种情况，请在此处发表评论。

感谢所有的答复！