在 React 中渲染 children，丢失 props 数据

Question

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

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

我将来自 Queries 的数据传递给 children:

<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，我可以看到它们是独一无二的。

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

Answer 1

您是否不小心声明了变量 'outside the class'？这可能会导致意外行为。尝试正确初始化所有变量，看看问题是否仍然存在

在 React 中渲染 children，丢失 props 数据

Rendering children in React, losing props data

javascript

children

nested

properties

reactjs