javascript - 更新状态中子节点中的值

Question

我的状态数据类似于下面的 json 对象:

{
  "ID": "1234",
  "Name": "Craig",
  "Children": [
    {
      "Name": "Jim",
      "Id": "1",
      "Enabled": true
    },
    {
      "Name": "Sam",
      "Id": "2",
      "Enabled": false
    },
    {
      "Name": "Donald",
      "Id": "3",
      "Enabled": true
    }
  ]
}

我将“Children”部分传递给 props 中的组件，然后将它们呈现为项目列表，并带有一个复选框，允许用户启用和禁用它们。我还传递了一个回调函数。我的计划是，当用户更改复选框的状态时，将复选框的新值以及子 ID 传递回我的父 Controller :

因此，如果我将 Jim 更改为 false，我会传回 {1 和 false}..

然后，这就是我陷入困境的地方，我需要在我的状态中找到该子对象，并更改“启用”值。

有没有一种 javascript 方法可以通过状态安全地执行此操作？我希望有一个 C# 版本，例如:

var child = (from c in state.data.Children where c.Id = 1);

然后设置该值。 (child.enabled = newValue)。

首先，Linq 不是一个选项，而且更新状态也不是那么容易。我需要设置状态。

或者，我是否只需将整个 props 值与更新后的值一起发回，并在我的父组件中以某种方式用新值替换整个“Children”对象。这似乎是一个坏主意，因为我会为了一个小小的改变而改变整个 Children 节点。

Answer 1

有几种方法可以做到这一点，我会通过 props 将闭包传递给子组件。这使得子进程变得非常“愚蠢”，不需要担心它在父数组中的位置。

class Container extends Component {
  handleOnChange = (index) => () => {
    this.setState({
      data: data.map((node, i) => index !== i 
        ? node 
        : ({ ...node, Enabled: !node.Enabled }))
    });
  }

  render() {
    return (
      <Fragment>
        {this.state.data.Children.map((child, i) => (
          <ChildDataNode isEnabled={child.Enabled} onChange={this.handleOnChange(i)} />
        ))}
      </Fragment>
    );
  }
}

// child
const ChildDataNode = ({ isEnabled, onChange }) => (
  <div>
    <input type="checkbox" onChange={onChange} value={isEnabled} />
  </div>
);

要执行相同的操作而不将 handleOnChange 视为闭包，这就足够了:

class Container extends Component {
  handleOnChange = (index) => {
    this.setState({
      data: data.map((node, i) => index !== i 
        ? node 
        : ({ ...node, Enabled: !node.Enabled }))
    });
  }

  render() {
    return (
      <Fragment>
        {this.state.data.Children.map((child, i) => (
          <ChildDataNode index={i} isEnabled={child.Enabled} onChange={this.handleOnChange} />
        ))}
      </Fragment>
    );
  }
}

// child
const ChildDataNode = ({ isEnabled, onChange, index }) => (
  <div>
    <input type="checkbox" onChange={onChange(index)} value={isEnabled} />
  </div>
);

六比一，六比一。我更喜欢前一种解决方案，因为它尽可能让 child 保持愚蠢。