Вопрос Reactjs специалистам, почему не срабатывает ограничение по позиции left?

Как-то у вас всё многословно и сильно переусложнено. Зачем целиком переопределять obj и несколько раз вызывать setState? - результат следующего вызова перетирает результат предыдущего, наверняка причина того, что ограничения координат не применяются, кроется где-то тут. Наверное, стоит создавать объект один раз, сразу с нужными значениями свойств, как-то так:

class App extends React.Component {
  state = {
    divStyle: {
      display: 'flex',
      alignItems: 'center',
      width: '1000px',
      height: '500px',
      outline: '1px solid red',
      position: 'relative',
    },
    move: {
      position: 'absolute',
      width: '200px',
      height: '100px',
      outline: '1px solid green',
      left: 100,
      top: 200,
    },
  }

  handlerMouseDown = e => {
    this.deltaX = e.pageX - this.ourdiv.offsetLeft;
    this.deltaY = e.pageY - this.ourdiv.offsetTop;
    window.addEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseUp = e => {
    window.removeEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseMove = ({ pageX }) => {
    this.setState(({ move }) => ({
      move: {
        ...move,
        left: Math.min(700, Math.max(100, pageX - this.deltaX)),
      },
    }));
  }

  render() {
    return (
      <div>
        <div style={this.state.divStyle}>
          <div
            ref={ourdiv => this.ourdiv = ourdiv}
            style={this.state.move}
            onMouseDown={this.handlerMouseDown}
            onMouseUp={this.handlerMouseUp}
          ></div>
        </div>
      </div>
    );
  }
}