设置 useState 对象值时使用 prop 值答案

【问题标题】：Use prop value when setting a useState object value设置 useState 对象值时使用 prop 值
【发布时间】：2020-02-26 10:31:43
【问题描述】：

我正在使用反应钩子 useState 来更新对象。我有一个可重用的组件，它只是一个输入，我将 props 传递给它和一个更新状态的 onChange 处理程序。

如何使用道具值“fooType”来动态更新状态？这在 fooType 中的 fooType 以外的其他工作：e.target.value` 未被识别为变量。有没有办法重构它以这种方式工作？

输入组件：

const Input = (props) => {
  const { foo, foos, setFoos, fooType } = props;

  return (
    <input type='text'
      placeholder={ foo }
      value={ foo }
      onChange={ (e) => setFoos({ ...foos, fooType: e.target.value }) } />
  );
};

这是我将道具传递给三个输入的文件

const InputGroup = (props) => {
  // initial state
  const [foos, setFoos] = useState({
    foo1: 0, foo2: 0, foo3: 0
  });

  return (
    <div>
      <Input foo={ foos.foo1 }
        fooType='foo1'
        foos={ foos }
        setFoos={ setFoos } />

      <Input foo={ foos.foo2 }
        fooType='foo2'
        foos={ foos }
        setFoos={ setFoos } />

      <Input foo={ foos.foo3 }
        fooType='foo3'
        foos={ foos }
        setFoos={ setFoos }/>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你得到了答案.. 但我会建议你更好地解决这个问题。

输入组件：

const Input = props => {
  const { index, fields, setFields } = props;

  return (
    <input type='text'
      placeholder={ fields[index].placeHolder }
      value={ fields[index].value }
      onChange={ e => {
        let fieldsCopy = fields.slice()        // shallow copy
        fields[index].value = e.target.value
        setFields(fieldsCopy.slice())
      } } />
  );
};

对于您的 3 个组件代码 -

const InputGroup = props => {
  // initial state
  const [fields, setFields] = useState([
    { value: 0, placeHolder: 'foo1' }
    { value: 0, placeHolder: 'foo2' }
    { value: 0, placeHolder: 'foo3' }
  ]);

  return (
    <div>
      {
        foos.map((element, index) => {
          <Input
            key={index}
            index={ index }
            fields={ fields }
            setFields={ setFields }
          />
        })
      }
    </div>
  );
}

不清楚就问

【讨论】：

不错！我接受了另一个答案，因为它更直接地回答了原始问题，但最终使用您的示例进行了重构。我最初试图使用地图，但无法完全理解。非常感谢。

【解决方案2】：

将括号添加到您的 [fooType] 以使其成为对象键

onChange={ (e) => setFoos({ ...foos, [fooType]: e.target.value }) }

这里有一个沙盒，你可以玩它：https://codesandbox.io/s/exciting-ritchie-ijxxb

【讨论】：

【解决方案3】：

您将希望将 [] 中的 fooType 括起来以将变量设置为键值。

onChange={ (e) => setFoos({ ...foos, [fooType] : e.target.value }) } />

就您现在编写它的方式而言，fooType 被解释为一个新的键值。但是上述更改应该可以解决它。

【讨论】：