Reactjs 如何动态地使用映射函数来创建useState属性

我的问题和你的差不多

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

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

---

您知道这方面的解决方案吗？

您可以通过使用

道具来实现这一点。直接向状态输入

，将其与

减少

组合，从

输入

数组创建新对象：

const-App=props=>{
const[state，changeState]=useState(
道具输入减少（（acc、cur、arr）=>({
[cur]：“”，
…acc
}), {})
);
返回(

{Object.entries（state.map）（[name，value]，index）=>(
{name}：{`'${value}}
))}

);
}

如果我们这样使用它：

---

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

const [state, changeState] = useState({});

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

在我的例子中，当单击映射的项目时，我试图获得一个项目唯一ID，并打开一个对话框确认要删除的选定项目，如下所示

export const StatsTable=（道具）=>{
常量[itemUid，setItemUid]=useState（“”）
const[open，setOpen]=useState（false）
常量handleClickOpen=（）=>{
setOpen（真）
}
console.log（'============================================================================'））
console.log（itemUid）
console.log（'============================================================================'））
...
返回(
...
{items.map（（item）=>{
...
handleClickOpen（setItemUid（item.uid））
}
>
删除
}
}
...

道具.输入是什么样子？@NicholasTower它有一个输入名称列表，我想给它们附加一个状态
{“tag”：“1231”，“description”：“Lorem Ipsum”，“inputs”：[“Field1”，“Field2”，“Field3”，“Field4”，“]}
您可能需要将
道具输入到新对象中。请参阅答案，这正是我的意思。这对我不起作用，
{…prevState
给我
预期的声明或语句
和
，[item]：“}）；
给了我
，“预期的”
。此代码是如何工作的？很抱歉，我错过了内部
（）
（现在已添加到编辑中）。因为您可以通过使用
[]
（即
obj[variable]
）通过变量访问对象键，您也可以利用此功能在迭代数组时动态分配它们。回调仅允许您使用
…
扩展语法来包括changeState中已存在但未在每次修改以添加下一个元素时显式定义的其余键：我仍然有
）'expected
在
的末尾（{…prevState，[item]：“”}），以分号表示。我理解forEach部分，但是这部分做什么呢
，[props.input]）
？哎呀，我忘了关闭forEach（已修复）。在这种情况下，当组件通过useffect（）挂载时，我会触发这种情况，然后指定
[props.input]
作为其第二个参数，表示当父组件更新props.input时也会发生这种情况。我只是假设这是一个预期的行为，但你可以选择修改它，以你喜欢的方式（即，只在挂载上一次，仅此而已）。如果能看到关于为什么这被否决的论点，我将不胜感激
useState
在初始化组件时可以访问组件道具，因此这将适用于创建组件时传递的动态道具。如果我们有更多需要在渲染中更改的动态道具，我们当然可以使用
useffect
hook。我没有否决这一点，因为我感谢任何帮助。尽管如此,，我尝试了这个建议，它只是创建了一个状态，在输入上有一个名称列表，而不是一个像地图一样的结构，用来保存输入字段的名称和值。
props。inputs
是一个数组。@emilebergron我误解了这个问题，没有意识到
props。inputs
是我们需要使用元素的数组键。@PedroVieira您可以使用
reduce
做您想做的事。请检查我的最新答案。
const [state, changeState] = useState({});

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