我的问题是几乎相同，这一个。
在这种情况下，此人具有以硬编码方式创建的状态图：
const App = props => {
const [state, changeState] = useState({
name: "",
eventTitle: "",
details: "",
list: "",
toggleIndex: "",
editName: "",
editEventTitle: "",
editDetails: "",
});
不同之处在于我想动态创建这些状态，从另一个组件接收它们。我尝试过这样的事情，但显然没有用：
const App = props => {
const [state, changeState] = useState({
props.inputs.map((input, i) =>
input = ""
)
});
你知道有什么解决办法吗？
假设props.input只是您想要的键的数组，您可以通过遍历数组并动态分配状态对象键来填充状态对象[]
const [state, changeState] = useState({});
useEffect(() => {
props.input.forEach(item => changeState(prevState => ({...prevState, [item]: "" })));
}, [props.input])
您可以通过props.inputs直接使用状态来实现这一点，将它与reduce从inputs数组中创建一个新对象相结合：
const App = props => {
const [state, changeState] = useState(
props.inputs.reduce((acc, cur, arr) => ({
[cur]: "",
...acc
}), {})
);
return (
<ul>
{Object.entries(state).map(([name, value], index) => (
<li key={`li-${index}`}><strong>{name}</strong>: {`"${value}"`}</li>
))}
</ul>
);
}
<App inputs={['name', 'details', 'list', 'editName']}/>
editName: ""
list: ""
details: ""
name: ""
您可以在此处查看正在运行的 Stackblitz 。
在我的情况下，我试图在单击映射项目时获取项目唯一 ID，并打开一个对话框以确认要删除的选定项目，如下所示
export const StatsTable = (props) => {
const [itemUid, setItemUid] = useState('')
const [open, setOpen] = useState(false)
const handleClickOpen = () => {
setOpen(true)
}
console.log('====================================')
console.log(itemUid)
console.log('====================================')
...
return (
...
{items.map((item) => {
...
<Button
type="submit"
onClick={() =>
handleClickOpen(setItemUid(item.uid))
}
>
Delete
</Button>
}
}
...
