Question

我刚刚开始使用React Redux，所以我只是在一些旧东西上弄乱了它。我有一个需要道具的组件：

 <DataTable dataType = {this.state.dataType} 
        drinkArray = {this.state.drinkArray} 
        foodArray = {this.state.foodArray} 
        sort = {this.sort}/>

DataTable所做的全部工作就是通过dataType选择的数组进行映射，并在表中显示一些信息。

<div sytle = {{textAlign: 'center'}}>
  {(this.props.dataType === 'food' &&
    <table className = 'foodTable'>
      <tbody>
        <tr>
          <th>Name</th>
          <th  id = 'price' onClick = {(e) => {this.props.sort(e,'food')}}>Price</th>
          <th  id = 'stock' onClick = {(e) => {this.props.sort(e,'food')}}>Stock</th>
        </tr>
        {this.props.foodArray.map((x,i) => {
          return (
            <tr key ={i}>
              <td>{x.name}</td>
              <td>{x.price}</td
              <td>{x.stock}</td>
            </tr>
            )
          })
        }
      </tbody>
    </table>
  )}
//etc.

基本上，问题是当我添加连接到DataTable组件时：

export default connect()(DataTable)

在这种情况下，我只是一团糟，并不打算实际做任何事情，但这会导致我无法解释的怪异行为。我通过props传递的sort函数不再导致DataTable重新呈现。但是，如果我通过单击按钮更改了父级的dataType，则DataTable会重新呈现。排序功能和更改dataType都使用setState（），而且我知道排序功能正在被调用并从登录到控制台正常工作。调用sort函数时，还会重新渲染父对象。如果我从DataTable组件中删除了connect，则排序功能将再次重新呈现DataTable。

所以我真正的问题是，为什么通过setState更改道具之一会导致孩子重新渲染，而通过setState更改其他道具却不会呢？这只是一个普遍的好奇心问题。

Answer 1

connect()做一个浅层比较（作为优化）-可能sort仅突变一个现有数组，它应该创建一个新对象（新引用）。

更新状态不会使用props react-redux connect

1 个答案: