reactjs 相关问题

我正在使用 .map 来显示人员列表： const [ftraveller, setFTraveller] = useState(null) {tr?.map((项目, i) => { 返回（ <> 我正在使用 .map 来显示人员列表： const [ftraveller, setFTraveller] = useState(null) {tr?.map((item, i) => { return ( <> <FormControlLabel key={el.id + item.Name} control={<Radio onChange={(e) => setFTraveller(e.target.value)} />} value={item.Name} name={el.id + item.Name} label={item.Name}></FormControlLabel> </> )})} </RadioGroup> 然后使用 ftraveller 显示该人可用的选项列表： {getselecteddata.map(els => { return ( <> <RadioGroup key={els.id} value={els.packingLocation ? els.packingLocation : "To Pack"} defaultValue="To Pack" row onChange={e => { const val = e.target.value const getd = getselecteddata.map(els => { return { ...els, packingLocation: val, } }) const ar = [...getalldata, ...getd] setFoodValue(ar) }}> <FormControlLabel value={"A - " + ftraveller} control={ <Radio value={"A - " + ftraveller} name={el.id + "A - " + ftraveller} /> } label={"A"} /> <FormControlLabel value={"B - " + ftraveller} control={ <Radio value={"B - " + ftraveller} name={el.id + "B - " + ftraveller} /> } label={"B"} /> </RadioGroup> </> )})} 我遇到的问题是，如果我改变了人，那么选中的选项就会改变其他人。所以看起来每次我更改收音机时FTraveller都会设置为最新的选择。如何更改此设置以唯一存储每个项目的 setFTraveller？有多种方法可以做到这一点，最简单的就是使用 ftravellers 作为数组： // create new array and fill it with false // new Array(tr?.lenght).fill(false) const [ftravellers, setFTravellers] = useState(new Array(tr?.lenght).fill(false)); 然后在你的收音机中： <Radio onChange={(e) => setFTravellers(fts => { let arr = [...fts]; arr[i] = e.target.value; return arr; })} value={ftravellers[i]} /> 如你所见，还可以，但有点笨拙其他方法（如果我想将所有数组保留在父组件中，我通常会这样做： // define array as empty array, and push/remove item id const [ftravellers, setFTravellers] = useState([]) const handleRadio = (ftravellerId) => { if (ftravellers.include(id)) setFTravellers(ftravellers.filter(({id}) => id !== ftravellerId); else setFTravellers([...ftravellers, id]); } // then in the radio: <Radio onChange={(e) => handleRadio(id)} value={travelers?.include(id)} ... /> 你可以看到更简洁的方法第三个选项是从您的无线电创建一个组件，并将状态保留在那里，但我认为如果您想在其他地方使用此状态，它不适合。

reactjs

回答 1 投票 0

如何从@tanstack/react-router Link组件中删除CSS？

我正在使用 React MUI List 组件和 tanstack router Link 组件我正在使用 React MUI List 组件和 tanstack router Link 组件 <List> <Link to="/customers/$customerID" params={{ customerID: 123 }}> <ListItemButton> <ListItemText primary="Customer 123" /> </ListItemButton> </Link> </List> 代码按预期工作，但 Link 组件覆盖了 MUI ListItemText 组件的 CSS。如果没有 Link 组件，假数据会像这样渲染使用链接组件，假数据会像这样呈现将 style={{ textDecoration: "none", textDecorationColor: "currentColor" }} 添加到链接组件并没有修复它。我创建了一个用于繁殖的小游乐场。你知道如何解决这个问题吗？你似乎在错误的地方提供了CSS，只需将CSS提供给标签而不是 style={{ textDecoration: 'none', color: 'inherit' }} 像这样重构你的代码 <List> <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }} // Inline style for Link > <ListItemButton> <ListItemText primary="Text" /> <ListItemText primary="Text" /> </ListItemButton> </Link> </List>

css reactjs material-ui tanstack-router

回答 1 投票 0

错误：如何从 getStaticProps 序列化数据：Next.js

我正在使用 Next.js，我尝试访问数据但收到此错误：错误：序列化从“/profile/[slug]”中的“getStaticProps”返回的“.profileData”时出错。原因：“未定义”不能...

javascript reactjs ecmascript-6 next.js server-side-rendering

回答 14 投票 0

Auth0 注销未完全注销 – 自动登录而不提示密码

我在 React 应用程序中使用 Auth0 进行用户身份验证。登录流程工作得很好。但是，我遇到了注销流程问题。当用户注销我的应用程序时...

reactjs authentication google-oauth auth0 logout

回答 1 投票 0

无法从模块“react-router”加载文件“./dom” - React router dom

我已经安装了最新的react router dom，并在package.js中显示“react-router-dom”：“^ 7.0.2”。当我检查npm -v react-router-dom时，它显示10.9.0。在我的代码中