javascript - 在 React 中渲染 child ，丢失 Prop 数据

Question

我有三个 react 组件渲染复选框组。

Queries -> renders a group
Query -> renders checkboxes
QueryItem -> render single input[type=checkbox]

我将来自查询的数据传递给 children 作为 Prop :

<div className="group queries">
  {component.state.groups.map((group, index) => {
    return <Query key={group.key} data={group} />
  })}
</div>

然后在查询中:

<div>
  <h1>{component.props.data.label}</h1>

  <ul>
    {component.props.data.queries.map( (query, index) => {
      return <QueryItem key={query.key} data={query} />
    })}
  </ul>
</div>

最后在 QueryItem 组件中:

<li>
  <input type='checkbox'
    ref="input"
    defaultChecked={component.props.data.checked}
    onChange={component.checkChanged}
    name={component.props.data.id}
    id={component.props.data.id} />

  <label htmlFor={component.props.data.id}>
    {component.props.data.label} <em>({component.props.data.total})</em>
  </label>
</li>

数据得到正确呈现。但是，当调用 onChange(checkChanged 函数)时:

checkChanged (e) {
  console.log(component.props.data)
}

component.props.data 中的数据是来自最后一个被渲染的 QueryItem 的数据。所以，基本上，数据总是相同的，并不代表呈现的数据。

你可以看到，我使用 key 属性来确保组件是唯一的。如果我检查 data-reactid，我可以看到它们是独一无二的。

这是怎么回事？我在设置类型上做错了什么？此设置的目标是在更改复选框时调用数据调用，然后将数据从查询向下传递到查询再到 QueryItem。

Answer 1

您是否不小心将变量声明为“类外”？这可能会导致意外行为。尝试正确初始化所有变量并查看问题是否仍然存在