我如何在React的UI组件内分配值给变量?

Question

我是React和Javascript的新手。我试图声明一个临时变量，并分配值companyData.name给它，因为我需要收集2个变量，如companyData.name.

这是我的代码。

<Box sx={{ flexGrow: 3 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={2.5}>
<Grid container spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 16 }} display="flex"
justifyContent="center"
alignItems="center" >
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 1:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}


/>
</Grid>

</Box>
</Grid>
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 2:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>

</Box>
</Grid>
</Grid>
</Box>


{chartData ? <CompanyChart dataset={chartData} companyName={companyData.name} companyName2={companyData.name}/>:<div> Loading chart...</div>}

我需要将1公司的companyData.name分配给上面一行的companyName。我试过使用React。useState用于此目的。但是我无法在UI组件中设置状态。

const [company1,setCompany1]=React.useState([]);
setCompany1(companyData.name)

关于如何进行任何帮助将不胜感激。我只需要把两个公司的名字传递给。

Answer 1

您正在使用数组作为默认状态([])，然后试图将字符串作为值传递setCompany(companyData.name)。

试试这个:

const [company1,setCompany1]=React.useState('');
setCompany1(companyData.name)