Question

我有三个反应组件呈现复选框组。

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

我将来自查询的数据作为子项的道具传递：

<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

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

在React中渲染子项，丢失道具数据

1 个答案: