如何使用钩子的映射函数动态地使用useState属性

Question

我的问题几乎和这个问题一样。

在这种情况下，此人有一张以硬编码方式创建的状态图：

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 = ""
)
});

你知道解决这个问题的办法吗？

Answer 1

假设props.input只是您想要的键的数组，您可以通过迭代数组并使用[]动态分配状态对象键来填充状态对象

const [state, changeState] = useState({});
useEffect(() => {
props.input.forEach(item => changeState(prevState => ({...prevState, [item]: "" })));
}, [props.input])

Answer 2

您可以通过直接使用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: ""

你可以在这里查看正在运行的Stacklitz。

Answer 3

在我的案例中，当我点击映射的项目时，我试图获得一个项目的唯一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>
}
}
...

图像示例