Question

在ES6中， ComputedPropertyName 允许我们执行类似use a variable as a key的操作，这反过来又意味着我们可以set state dynamically。但是，如果您看看动态设置状态的示例，它们往往有一个共同点-状态键的名称是硬编码的。例如：

class Input extends React.Component {
    state = { state1: "" };

    handleChange = event => {
        const {
            target: { name, value }
        } = event;

        this.setState({
            [name]: value
        });
    };

    render() {
        return (
            <div>
                <label>
                    <input
                        type="text"
                        name="state1"
                        value="new value"
                        onChange={this.handleChange}
                    />
                </label>
            </div>
        );
    }
}

之所以行之有效，是因为我们有一个名为“ state1”的状态键，如行state = { state1: "" };所示，并且我们在输入字段中将名称硬编码为该状态键，如行{{1 }}。

我不喜欢这种解决方案，因为这意味着我现在必须跟踪name="state1" state.state1 state.state1" in more than one location. If I were to refactor state.state2 to instead be name =“ state1” 1并进行更新阅读, I would have to go find。不用担心，我想知道是否有一种方法可以动态设置状态而无需对该状态键进行硬编码。也就是说，我正在寻求改变

name="state2"

变成这样：

<input
      type="text"
      name="state1"
      value="new value"
      onChange={this.handleChange}
      />

显然，上述操作不起作用，因为<input type="text" name={this.state.state1.keyname} value="new value" onChange={this.handleChange} />未定义，但是这里的目的是使名称可以采用“ state1”的值，而无需我对其进行硬编码。如何实现？

Answer 1

您可以拥有一个数组，其中包含带有键strftime和type的对象，可用于设置初始状态并动态呈现输入。这样，您只需要在数组中更改一次值即可。您可以执行以下操作。

这里是codesandbox

name

希望这会有所帮助！

Answer 2

您可以通过在state字段中创建一个对象，并为其指定key和value来实现。

尽管更新状态时，您将需要使用Object.assign创建对象的副本并将其存储在变量中。然后您可以对该对象进行变异并设置状态。

Answer 3

有新的 useReducer（）带有钩子和上下文。检查一下，我认为这是解决您的问题的最佳模式。 https://reactjs.org/docs/hooks-reference.html。

React-动态设置状态，无需硬编码键字段

3 个答案: