javascript - React.memo 在 prevProps 和 nextProps 上总是包含相同的值

Question

我有一个功能组件JobItem。在我的父容器中，我管理状态。除了记忆之外，一切都很好，因为prevProps和nextProps属性总是相等的。

这是我的组件：

function areEqual(prevProps, nextProps) {

  console.log(prevProps.job_item.quantity)
  console.log(nextProps.job_item.quantity)

  return false
};

const JobItem = React.memo(props => {

  return (
        ....
  )

}, areEqual);

export default JobItem;

这是我的事件处理程序：

handleItemChange = (item, event) => {

    item[event.target.name] = event.target.value;
    this.setState({
      job: this.state.job
    })

}

在我的areEqual函数中，我必须返回 false 才能更新组件，因为nextProps.job_item.quantity它总是等于prevProps.job_item.quantity. 我认为这与我的事件处理程序有关，但我不确定如何解决这个问题。

这是一个数量字段的示例，它通过首先传递一个实例job_item然后传递事件本身来调用处理程序，这允许我更改quantity作业项上的属性，该属性是当前状态的一部分，然后将状态设置为当前修改后的状态对象。状态对象包含一个job包含 的数组items。

<TextField
      name={name}
      value={value}
      label={label}
      variant="outlined"
      type="number"
      onChange={e => handleItemChange(item, e)}
      InputLabelProps={{
        shrink: true,
      }}
    />

标签： javascriptreactjs