Javascript 返回函数不使用js呈现元素

在给定的代码中，导航栏被渲染，但h1和img没有。检查时，将渲染它们，但其中的值不可用。当我尝试通过控制台日志进行调试时，我看到在useEffect中，一切都很好，但在那之后，控制台日志中没有任何内容

import React, {useEffect} from "react";
import Navbar from "./components/Navbar";

const data_companies = require( "./components/companies.json");
const titleCase = require("./components/titleCase.js");

function CompanyLabel(){
    let data = "";
    let companyName = "";
    let companyLogo = "";

    useEffect(() => {
        data = data_companies;
        console.log("DATA", data);
        
        companyName = window.location.href.split("/company/")[1].replace(/%20/g, " ");
        console.log(companyName);

        data = data[companyName];
        console.log("data of the company", data);

        companyLogo = data.[3].logoLink;
        console.log("logo link of the company", companyLogo);

    }, []);

    companyName = titleCase(companyName);

    return (
        <div className="company-profile">
            <Navbar></Navbar>
            <h1>{companyName}</h1>
            <img src={companyLogo} alt={companyName}/>
        </div>
    )
}

export default CompanyLabel;

import React，{useffect}来自“React”；
从“/components/Navbar”导入导航栏；
const data_companys=require（“./components/companys.json”）；
常量titleCase=require（“./components/titleCase.js”）；
函数CompanyLabel（）{
让数据=”；
让companyName=“”；
让公司走“”；
useffect（（）=>{
数据=公司的数据；
控制台日志（“数据”，数据）；
companyName=window.location.href.split（“/company/”[1]。替换（/%20/g，”）；
console.log（companyName）；
数据=数据[公司名称]；
console.log（“公司数据”，数据）；
companyLogo=数据[3]。logoLink；
console.log（“公司的徽标链接”，companyLogo）；
}, []);
companyName=滴定酶（companyName）；
返回(
{companyName}
)
}
导出默认公司标签；

---

请帮忙，谢谢！！：）

将useEffect钩子与空数组一起使用意味着它仅在组件挂载和组件卸载时运行该函数，请参见：

那么，为什么你会期望日志不断出现呢

至于您的问题，您是否尝试过将变量设置为state

import React, {useEffect, useState} from "react";
import Navbar from "./components/Navbar";

const data_companies = require( "./components/companies.json");
const titleCase = require("./components/titleCase.js");

function CompanyLabel(){
    const [data, setData] = useState(data_companies); // default value
    const [companyName, setCompanyName] = useState("");
    const [companyLogo, setCompanyLogo] = useState("");

useEffect(() => {
        console.log("DATA", data);
        
        setCompanyName(window.location.href.split("/company/")[1].replace(/%20/g, " "));
        console.log(companyName);

        setData(data[companyName]);
        console.log("data of the company", data);

        setCompanyLogo(data[3].logoLink);
        console.log("logo link of the company", companyLogo);

    }, []);
    setCompanyName(titleCase(companyName));
    return (
        <div className="company-profile">
            <Navbar></Navbar>
            <h1>{companyName}</h1>
            <img src={companyLogo} alt={companyName}/>
        </div>
    )
}

export default CompanyLabel;

应该是

companyLogo = data[3].logoLink;

更新：在上面的例子中，问题是对setCompanyName的最后一次调用，每次渲染时都会调用它，并且还会触发新的渲染。在上面的示例中，移动

setCompanyName(titleCase(companyName));

进入useEffect回调，或者尝试以下示例

import React, {useEffect, useState} from "react";
import Navbar from "./components/Navbar";

const data_companies = require( "./components/companies.json");
const titleCase = require("./components/titleCase.js");

function CompanyLabel(){
    const [companyName, setCompanyName] = useState(window.location.href.split("/company/")[1].replace(/%20/g, " "));
    const [data, setData] = useState(data_companies[companyName]); // default value
    const [companyLogo, setCompanyLogo] = useState(titleCase(data[3].logoLink));
    useEffect(() => {
        console.log("DATA", data);
        console.log(companyName);
        console.log("data of the company", data);
        console.log("logo link of the company", companyLogo);

    }, []);

    return (
        <div className="company-profile">
            <Navbar></Navbar>
            <h1>{companyName}</h1>
            <img src={companyLogo} alt={companyName}/>
        </div>
    )
}

export default CompanyLabel;

import React，{useffect，useState}来自“React”；
从“/components/Navbar”导入导航栏；
const data_companys=require（“./components/companys.json”）；
常量titleCase=require（“./components/titleCase.js”）；
函数CompanyLabel（）{
const[companyName，setCompanyName]=useState（window.location.href.split（“/company/”）[1]。替换（/%20/g，”）；
const[data，setData]=useState（data_companys[companyName]）；//默认值
const[companyLogo，setCompanyLogo]=useState（titleCase（数据[3].logonlink））；
useffect（（）=>{
控制台日志（“数据”，数据）；
console.log（companyName）；
console.log（“公司数据”，数据）；
console.log（“公司的徽标链接”，companyLogo）；
}, []);
返回(
{companyName}
)
}
导出默认公司标签；

使用带有空数组的useEffect钩子意味着它仅在组件挂载和卸载时运行该功能，请参阅：

那么，为什么你会期望日志不断出现呢

至于您的问题，您是否尝试过将变量设置为state

import React, {useEffect, useState} from "react";
import Navbar from "./components/Navbar";

const data_companies = require( "./components/companies.json");
const titleCase = require("./components/titleCase.js");

function CompanyLabel(){
    const [data, setData] = useState(data_companies); // default value
    const [companyName, setCompanyName] = useState("");
    const [companyLogo, setCompanyLogo] = useState("");

useEffect(() => {
        console.log("DATA", data);
        
        setCompanyName(window.location.href.split("/company/")[1].replace(/%20/g, " "));
        console.log(companyName);

        setData(data[companyName]);
        console.log("data of the company", data);

        setCompanyLogo(data[3].logoLink);
        console.log("logo link of the company", companyLogo);

    }, []);
    setCompanyName(titleCase(companyName));
    return (
        <div className="company-profile">
            <Navbar></Navbar>
            <h1>{companyName}</h1>
            <img src={companyLogo} alt={companyName}/>
        </div>
    )
}

export default CompanyLabel;

应该是

companyLogo = data[3].logoLink;

更新：在上面的例子中，问题是对setCompanyName的最后一次调用，每次渲染时都会调用它，并且还会触发新的渲染。在上面的示例中，移动

setCompanyName(titleCase(companyName));

进入useEffect回调，或者尝试以下示例

import React, {useEffect, useState} from "react";
import Navbar from "./components/Navbar";

const data_companies = require( "./components/companies.json");
const titleCase = require("./components/titleCase.js");

function CompanyLabel(){
    const [companyName, setCompanyName] = useState(window.location.href.split("/company/")[1].replace(/%20/g, " "));
    const [data, setData] = useState(data_companies[companyName]); // default value
    const [companyLogo, setCompanyLogo] = useState(titleCase(data[3].logoLink));
    useEffect(() => {
        console.log("DATA", data);
        console.log(companyName);
        console.log("data of the company", data);
        console.log("logo link of the company", companyLogo);

    }, []);

    return (
        <div className="company-profile">
            <Navbar></Navbar>
            <h1>{companyName}</h1>
            <img src={companyLogo} alt={companyName}/>
        </div>
    )
}

export default CompanyLabel;

import React，{useffect，useState}来自“React”；
从“/components/Navbar”导入导航栏；
const data_companys=require（“./components/companys.json”）；
常量titleCase=require（“./components/titleCase.js”）；
函数CompanyLabel（）{
const[companyName，setCompanyName]=useState（window.location.href.split（“/company/”）[1]。替换（/%20/g，”）；
const[data，setData]=useState（data_companys[companyName]）；//默认值
const[companyLogo，setCompanyLogo]=useState（titleCase（数据[3].logonlink））；
useffect（（）=>{
控制台日志（“数据”，数据）；
console.log（companyName）；
console.log（“公司数据”，数据）；
console.log（“公司的徽标链接”，companyLogo）；
}, []);
返回(
{companyName}
)
}
导出默认公司标签；

Hello，我尝试了你给出的代码，它给出了

error的错误：重新渲染太多。React限制渲染数量以防止无限循环。

我添加了一个更新。setCompanyName（titleCase（companyName））；正在useEffect外部调用-它是组件函数的一部分，这意味着它会触发渲染，也会调用每个渲染，或者将其移动到useEffect回调中，或者使用我提供的第二个解决方案作为替代方案。这些是React-hook生命周期的基本概念，我建议您通过阅读文档来熟悉这一切的工作原理。更好的选择是将最后的setCompanyName调用移动到回调中，或者干脆将其删除并更改为：setCompanyLogo（titleCase（data[3].logoLink））；在前面的callHello中，我尝试了你给出的代码，它给出了

error的错误：太多的重新渲染。React限制渲染数量以防止无限循环。

我添加了一个更新。setCompanyName（titleCase（companyName））；正在useEffect外部调用-它是组件函数的一部分，这意味着它会触发渲染，也会调用每个渲染，或者将其移动到useEffect回调中，或者使用我提供的第二个解决方案作为替代方案。这些是React-hook生命周期的基本概念，我建议您通过阅读文档来熟悉这一切的工作原理。更好的选择是将最后的setCompanyName调用移动到回调中，或者干脆将其删除并更改为：setCompanyLogo（titleCase（data[3].logoLink））；在上次通话中