如何在 React 的 UI 組件中為變量賦值？

Question

我對 React 和 Javascript 比較陌生。 我正在嘗試聲明一個臨時變量並將值 companyData.name 分配給它，因為我需要收集像 companyData.name 這樣的 2 個變量。

這是我的代碼。

<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)

任何有關如何進行的幫助將不勝感激。 我只需要將 2 家公司的名稱傳遞給 .

Answer 1

您正在使用數組作為默認狀態 ([])，然后嘗試將字符串作為值 setCompany(companyData.name) 傳遞。

嘗試這個：

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

setCompany1(companyData.name)