如何动态使用 map 函数挂钩 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.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 here。

Answer 2

假设 props.input 只是您想要的键的数组，您可以通过遍历数组并使用 []

动态分配状态对象键来填充状态对象

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

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

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

...

Image Example

如何动态使用 map 函数挂钩 useState 属性

How to use map function for hooks useState properties dynamically

setstate

reactjs

react-hooks

如果我们这样使用它：

我们会得到这样的结果：