Question

我遇到了将道具从父级传递到子级的情况。父级连接到redux存储，从子级（使用bindActionCreators），我调度一些操作来更改父级连接到的存储中的状态。现在，当我从子级更改存储中的状态时，父级会更新，而子级不会更新。导致更改的（逻辑）/（用户操作）起源于孩子。通过从父项本身调度操作并通过回调将子项中的必要信息发送给父项，我解决了这个问题。现在，父母和孩子都更新。代码太大，无法在此处发布，我至少已经使代码可以工作了。我只是想知道为什么在孩子派发动作的情况下孩子不更新，有人可以指出我是否在这里遗漏了一些基本概念，或者可能是更复杂的事情，只能通过进入详细的代码。

（编辑后包含简化的代码）。此版本是子级分派操作以修改商店的版本，父级会更新，而子级则不会。如果我将分派移至父级本身，则子级将开始更新。

父母：

class Table extends Component {
render() {
return (
  <div className = 'table-container'>
      {
      this.props.columns.map((column) => 
       <div key = {i}>
         {column}
       </div>
      }
      <TableHeader
      columns = {this.props.columns}
      />
  </div>
  )
 }
}

function mapStateToProps(state){
  return {
    columns: state.columns,
  };
}

export default connect(mapStateToProps, null)(Table);

孩子：

class TableHeader extends Component {

  constructor(props){
    super(props)
    this.getColumnHeadings.bind(this)
  }


  onDragStart(ev, i) {
    ev.preventDefault();
  }

  onDragOver(ev) {
    ev.preventDefault();
  }

  onDrop(ev, i) {
    ev.preventDefault();
    this.props.changeColumns({index: i})
  }


  getColumnHeadings = (columns) => {
    return this.props.columns.map((column, i) =>
        <div key = {i}
        draggable
        onDragStart = {(ev) => this.onDragStart(ev, i)} 
        onDragOver = {this.onDragOver} 
        onDrop = {(ev) => this.onDrop(ev, i)}
        >
        {column}
        </div>
    )
  }


  render() {
    return (
          <div className = 'table-header1'>
            {this.getColumnHeadings(this.props.columns)}
          </div>
    )
  }
}

function matchDispatchToProps(dispatch){
  return bindActionCreators({changeColumns: changeColumns}, dispatch)
}

export default connect(null, matchDispatchToProps)(TableHeader);

动作创建者：

export const changeColumns = (changeInfo) => ({ type: "change columns", payload: changeInfo});

谢谢！

Answer 1

使用connect连接到redux存储时，需要将状态传递给子组件中的props。

否则您的子组件将不知道状态已更改（让redux store通知您的子组件）。

（实际上，如果您通过Table中的道具将其传递给子组件，则确实如此，但是正如您所说的那样，这不是您想要的，并且没有必要首先使用Redux。）< / em>

function mapStateToProps(state){ return { columns: state.columns, }; } function matchDispatchToProps(dispatch){ return bindActionCreators({changeColumns: changeColumns}, dispatch) } export default connect(mapStateToProps, matchDispatchToProps)(TableHeader);

Answer 2

我认为这样做的原因可能是，一旦您通过connect HOC将组件连接到Redux Store，您的组件就会根据Redux存储的更改方式以及触发mapStateToProps来更新其道具。似乎当从父级传递道具时它不再呈现。有这种经验，必须将道具通过父级组件作为道具。

父状态更改时，子组件不会更新

2 个答案: